Applet WeChat d'auto-apprentissage de zéro à un : encapsulation de la demande http après la construction du projet

1. Réassemblage du module http

Tout d'abord, pourquoi devrions-nous reconditionner le module http de WeChat Voyons d'abord comment la requête http intégrée de WeChat est écrite

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

Cette méthode de requête est similaire à notre ancienne méthode jquery.Nous devons effectuer certaines opérations commerciales dans la fonction de rappel de succès.Cette méthode provoquera notre problème d'enfer de rappel, et le code n'est pas assez intuitif et le code est trop lourd.

Ensuite, je vais empaqueter le code via des promesses et simplifier la méthode de requête

1 Construction du répertoire du projet

<.>Créez le fichier request.js sous le répertoire utils pour encapsuler la requête http. Nous l'encapsulons via des promesses. Cela nous est utile pour gérer les erreurs et nous pouvons également afficher la logique métier. de manière très intuitive. L'exemple de code encapsulé est le suivant :

/**
 * 
 * @param {String} url 
 * @param {Object} data 
 * @param {String} method 
 * @param {String} header 
 */
function request(url, data={}, method='GET', header="Content-Type: application/json",) {
    return new Promise(function (resolve, reject) {
        wx.request({
            url: url,
            data: data,
            header: header,
            method: method,
            dataType: 'json',
            responseType: 'text',
            success: (res)=>{
                if(res.statusCode === 200) {
                    if (res.data.code === 200) {
                        resolve(res.data)
                    } else {
                        wx.showToast({
                            title: res.data.msg,
                            icon: 'none',
                            image: '',
                            duration: 1500,
                            mask: false,
                            success: (result)=>{
                                resolve(res.data);
                            },
                        });
                    }
                } else {
                   
                }
            },
            fail: (res)=>{
                // 需要我们加上统一的错误处理代码
                reject(res)
            },
            complete: ()=>{}
        });
    }) 
}

// 封装方法
// 如果对于header有什么特殊的要求，可以在请求参数里面做一些添加，例如后续我们会在headder中加入我们的sessionkey这些内容
// header = {}里面添加header内容
// 这块是一个简版的说明
const header = {
    "Content-Type": "application/json",
    // 这个token是微信登录以后，将token存入在缓存中
    "token": "*****************"
}

const get = function(url, data, header) {
    return request(url, data, 'GET', header);
}

const post = function(url, data, header) {
    return request(url, data, 'POST', header);
}

const del = function(url, data, header) {
    return request(url, data, '', header);
}


module.exports = {
    get,
    post,
    del,
}

2. L'utilisation des requêtes dans le projet

Tout d'abord, nous présentons notre module http encapsulé au niveau du projet. emplacement d'utilisation

import webHttp from './utils/request';

Ensuite, nous pouvons utiliser notre outil webhttp encapsulé, qui réduit la quantité de code par rapport à l'utilisation directe précédente de la méthode de requête de WeChat. En même temps, la méthode de chaîne rend la logique plus claire.

webHttp.get(api.user.info, {
    // nick_name: 
    ...self.globalData.userInfo
}).then((res) => {
    console.log(res);
})

C'est à peu près un processus comme celui-ci. Dans le processus réel, l'encapsulation devra peut-être être encore améliorée selon la méthode de l'API restful back-end. Les paramètres de données de la demande de publication sont également traités différemment. Cela nécessite d'effectuer les ajustements correspondants en fonction de la situation réelle. Si cet article vous est utile, n'hésitez pas à le sauvegarder et à l'aimer. S'il existe une meilleure façon, n'hésitez pas à communiquer. Le progrès ne s'arrêtera jamais

. Tutoriel recommandé : "

Mini programme WeChat

》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!