Encapsuler la demande d'applet [fonction d'interface]

         Dans cet article de l'API du mini programme basé sur Promise , il est mentionné que les API asynchrones officiellement fournies par le mini programme sont implémentées sur la base de fonctions de rappel.L'utilisation intensive de ces fonctions de rappel entraînera le problème de l'enfer du rappel et la lisibilité du code. Les performances et la maintenabilité médiocres peuvent être résolues en promettant l'API du mini programme. Cet article concerne donc l'encapsulation de la demande d'interface pour la demande de données réseau du programme WeChat Mini.

Encapsuler la demande de demande d'applet

        Créez un fichier request.js dans le répertoire /utils pour encapsuler la requête de l'applet :

// 封装数据请求request
const BASE_URL = '';  // 基础地址

export default function request(url,params={}){
  return new Promise((resolve,reject)=>{
  wx.showLoading({  // 请求提示
    title: '正在加载中...',
  })
  wx.request({
    url: BASE_URL + url,  // 请求url地址
    data: params.data || {},  // 请求参数
    header: params.header || {},  // 请求头
    method: params.method || 'GET', // 请求方式
    dataType: 'json', // 返回数据类型
    success: (res)=> { // 成功调用
      wx.hideLoading(); // 关闭请求提示
      resolve(res.data) // 成功处理res.data中的数据
    },
    fail: (err)=> { // 失败调用
      wx.hideLoading(); // 关闭请求提示
      wx.showToast({  // 提示错误信息
        title: err || '请求错误！',
      })
      reject(err) // 失败处理err
    }
  })    
})
}

        L'encapsulation de la demande de données réseau de la requête n'est pas si compliquée et devrait être plus facile à comprendre avec quelques commentaires. Avant de renvoyer une nouvelle promesse (..), ce qui est renvoyé est un objet Promise, puis une nouvelle promesse peut être créée. data, il a deux paramètres, et les deux paramètres sont des fonctions, c'est-à-dire des fonctions d'ordre supérieur ; avant la demande, utilisez wx.showLoading pour indiquer que la demande est en cours de chargement, lancez une demande de données via wx.request, raccordez avec le l'adresse de base BASE_URL et les données de passage reçoivent les paramètres entrants, l'en-tête et la méthode sont identiques, le succès est appelé avec succès pour fermer l'invite de demande et remis pour résoudre le traitement du résultat réussi, l'échec échoue à appeler pour fermer l'invite de demande, et en même temps, il doit inviter l'utilisateur à demander des informations erronées, puis les transmettre à rejeter pour traiter le résultat de l'échec ;

Comment appeler la requête encapsulée request ?

        Tout d'abord, préparons l'interface de test de la requête de données. Ici, l'interface API fournie par le serveur équipé du Node.js local est utilisée pour les tests :

        L'interface de test a été préparée, définissez l'adresse de base BASE_URL sur http://127.0.0.1:3000 ;

const BASE_URL = 'http://127.0.0.1:3000'

         Ici, vous devez définir [Vérifier] [Détails] - [Ne pas vérifier le nom de domaine légal...] ​​dans les outils de développement du programme WeChat Mini ;

        Configurez un bouton dans index.wxml :

<button bindtap="handleClick">request请求</button>

        Introduisez le fichier de demande de données de requête d'encapsulation dans index.js et écrivez l'événement déclencheur handleClcik du bouton :

// index.js
const app = getApp()
import request from '../../utils/request'
Page({
    handleClick(){
        request('/api/navList').then(res=>{
            console.log(res);
        })
    }
})

Encapsuler chaque fonction de demande d'interface de données

        Il existe de nombreuses demandes de données d'interface utilisées dans le projet.À l'heure actuelle, ces fonctions d'interface sont encapsulées et peuvent être directement importées et utilisées lorsqu'elles sont utilisées ;

        Créez un fichier /util/api.js pour encapsuler la fonction de requête de chaque interface :

// 引入封装request请求函数
import request from './request'
// 获取swiperList数据
export const reqSwiperList = () => request('/api/swiperList')
// 获取navList数据
export const reqNavList = () => request('/api/navList')
// 获取category数据
export const reqCategory = () => request('/api/category')

        Ce qui suit est appelé et utilisé dans onLoad dans index.js :

...
 onLoad:function(){
    reqSwiperList().then(res=>{console.log('reqSwiperList',res)});
    reqNavList().then(res=>{console.log('reqNavList',res)});
    reqCategory().then(res=>{console.log('reqCategory',res)});
 }
...

 asynchrone et attendre 

        Utiliser async et await est plus concis que d'utiliser .then(res=>{}) ; modifions la fonction de requête dans handleClick :

handleClick(){
    reqSwiperList().then(res=>{
        console.log(res);
    })
}

        Utilisez async et wait pour écrire :

async handleClick(){
    const res = await reqSwiperList()
    console.log(res)
}

        Ce qui précède est le contenu de l'encapsulation de la demande de données de demande de l'applet et de l'encapsulation de la fonction de demande de données de chaque interface ; il peut être utilisé dans votre projet d'applet, encapsuler la demande de demande de l'applet et encapsuler la demande de chaque interface peut vous faire plus dans le projet applet Go up! Merci pour votre aide! ! !