wepy plugin axios
1.0.0
Tout d’abord, merci aux auteurs d’axios et wepy pour avoir fourni de si belles bibliothèques !
Il s'agit d'un plug-in Wepy qui vous permet d'utiliser axios dans de petits programmes
documentation axios |
Lors de la création d'un mini-programme, les fonctions de la fonction wx.request intégrée au mini-programme étaient sévèrement limitées. Même wepy.request n'est qu'une simple encapsulation de la fonction d'origine et ne peut pas fournir de fonctions avancées comme axios. in permet à la plupart des fonctions d'axios d'être utilisées dans de petits programmes.
Tout en gardant l'API aussi proche que possible de l'API d'origine d'axios, ce plug-in encapsule wx.request , wx.uploadFile et wx.downloadFile . Il fournit également une fonction de file d'attente de requêtes, supprimant la limite d'envoi jusqu'à 5 requêtes. en même temps.
Si vous l'aimez, donnez-lui une étoile et soutenez-le. Les problèmes et les relations publiques sont les bienvenus ?
Utilisez npm ou Yarn pour installer axios et wepy-plugin-axios en même temps
npm installer axios wepy-plugin-axios --save fil ajouter axios wepy-plugin-axios
Remarque : ce plug-in doit être utilisé avec wepy . Les exemples suivants utilisent la dernière version de wepy. Si vous ne savez pas comment utiliser wepy ou axios, veuillez d'abord lire leur documentation respective.
Configurer Wepy
Ajoutez l'élément axios aux plugins de wepy.config.js . Le plugin n'a pas d'options, utilisez simplement un objet vide comme option.
module.exports = {
// ...autres plugins de configuration : {// ...autres plugins axios : {}
}}Remarque : Si vous utilisez la configuration par défaut générée par wepy, il y a le code suivant à la fin du fichier :
module.exports.plugin = {
uglifyjs : {// ...
},
imagemin : {// ...
}} Ici, vous devez également insérer une ligne de axios: {} , sinon une erreur se produira lors de la génération de la version finale.
Configurer axios
Introduisez une fonction pour générer un adaptateur à partir de wepy-plugin-axios/dist/adapter , puis transmettez une instance d'axios à cette fonction pour obtenir un adaptateur
Utilisez axios.defaults ou axios.create pour définir adapter d'axios (cette dernière est recommandée)
importer axios depuis 'axios' importer wepyAxiosAdapter depuis 'wepy-plugin-axios/dist/adapter'// L'initialisation de l'adaptateur doit être exécutée avant tout autre adaptateur const axios.create = wepyAxiosAdapter(axios)export default axios.create({
adapter: adapter // Cette propriété est la clé pour utiliser axios dans un mini programme // ...Autres propriétés})L'exemple suivant suppose que la configuration a été effectuée conformément au contenu ci-dessus.
//Envoyer une requête GET normale axios.get('https://huajingkun.com/api/userinfo')//Envoyer des données json axios.request({
méthode : 'poster',
URL : 'https://huajingkun.com/api/userinfo',
données : {pseudonyme : '233'
}})//Envoyer des données codées en URL axios.post('https://huajingkun.com/api/userinfo', { pseudo : '233' }, {
en-têtes : {'content-type' : 'application/x-www-form-urlencoded'
}}) Si le champ $upload apparaît dans les données de la requête POST, cette requête est considérée comme une requête de téléchargement de fichier.
axios.post('https://huajingkun.com/api/avatar', {
$upload : {name : 'avatar',filePath : 'wxfile://sometempfilepath' // Résultats d'interfaces telles que wx.chooseImage },
// ...autres données envoyées ensemble}) Si responseType est file dans une requête GET, cette requête est considérée comme une requête de téléchargement de fichier. Le chemin temporaire du fichier est renvoyé (voir la documentation de développement du mini-programme pour plus de détails).
Remarque : le protocole HTTP ne peut être utilisé que pour le moment.
axios.get('http://www.baidu.com', {responseType: 'file' }).then(response => {
console.log(response.data) // Afficher le chemin temporaire du fichier téléchargé avec succès})Ce plug-in prend en charge la plupart des options axios et apporte également quelques modifications basées sur l'API axios d'origine :
Remarque : En raison de la fonction de requête limitée du mini-programme, les options suivantes ne sont pas prises en charge. Si les options suivantes apparaissent pendant l'utilisation, elles seront ignorées. Les fonctions ne figurant pas dans cette liste peuvent être utilisées.
timeout
withCredentials
auth
xsrfCookieName
xsrfHeaderName
onUploadProgress
onDownloadProgress
maxContentLength
maxRedirects
httpAgent
httpsAgent
proxy
url : Le protocole doit être spécifié, et il ne peut être que http ou https. Seul le téléchargement de fichiers peut utiliser http.
method : ne peut être qu'une méthode supportée par le mini programme (voir la documentation de développement du mini programme pour plus de détails)
responseType : ne peut être que l'un des json , text et file
Le contenu renvoyé est similaire au contenu renvoyé d'axios :
{
// Données de réponse renvoyées par le serveur // Pour les demandes de téléchargement de fichiers, le contenu du champ de données est le chemin temporaire des données du fichier : object string |
// Statut du code de réponse HTTP : numéro,
// En-têtes HTTP renvoyés par le serveur. Tous les noms d'en-têtes sont en minuscules // Pour les requêtes d'upload ou de téléchargement, le champ en-têtes est toujours un objet vide (l'applet ne fournit pas le contenu de l'en-tête renvoyé)
en-têtes : objet,
// Options de requête utilisées par axios config : object,
// Transmet le contenu spécifique de la requête wx.request ou wx.uploadFile ou wx.downloadFile : object}Étant donné que le système de plug-in actuel de wepy n'est pas assez parfait, ce plug-in utilise une méthode relativement "sale" pour permettre à axios d'être utilisé dans wepy :
Modifier directement le fichier source axios
La définition des adaptateurs dans le fichier source axios lib/defaults.js a été supprimée dans lib/plugin.js . Étant donné qu'axios prend en charge à la fois les navigateurs et Node.js, wepy ne peut pas ignorer le module natif de Node.js lors de l'empaquetage. provoquer une défaillance de l'emballage.
Cependant, le plug-in wepy ne peut actuellement modifier le fichier source que lors de la dernière étape de l'empaquetage et ne peut pas modifier les informations de dépendance. Par conséquent, le code préparé pour Node.js ne peut pas être ignoré, il ne peut donc être supprimé que grossièrement. code cassé par le navigateur, je l'ai également supprimé d'ailleurs, car XMLHttpRequest ne peut pas être utilisé dans les mini-programmes et un adaptateur personnalisé doit être utilisé complètement. Après la suppression, la taille du fichier peut également être réduite.
Cette modification signifie que si votre code d'applet partage un dossier node_modules avec un autre code, celui-ci ne pourra pas utiliser axios normalement.
Étant donné que wepy n'a actuellement pas de fonction d'alias, vous pouvez uniquement copier l'intégralité du dossier du projet dans le dossier node_modules du projet de test pendant le développement et remplacer wepy-plugin-axios/dist/adapter par wepy-plugin-axios/lib/adapter.js
Exécutez la commande suivante lors de la compilation pour obtenir le fichier final dans le dossier dist :
npm exécuter la construction
MIT
