Comment réencapsuler les requêtes réseau dans un mini programme

Cet article vous présentera l'encapsulation des requêtes réseau dans le développement de l'applet WeChat, parlera des raisons de l'encapsulation secondaire et de la mise en œuvre spécifique de l'encapsulation. J'espère qu'il sera utile à tout le monde !

1. Contexte

Lors du développement de mini-programmes WeChat, des opérations de demande de réseau seront inévitablement impliquées. L'API de demande de réseau native fournie par le mini-programme est la suivante :

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

Parmi elles :

• url : est l'adresse de l'interface d'arrière-plan de la requête ;

• data : est le paramètre que l'interface de requête doit contenir ;

• header : définit l'en-tête de la requête, content-type est par défaut application/json,

• success : la requête est-elle réussie ? Après le rappel, res contient les données renvoyées une fois la requête réussie.

Pour plus d'informations sur l'utilisation de wx.request, veuillez consulter l'introduction officielle.

RequestTask | WeChat Open Document

Alors puisque l'API officielle a été fournie, pourquoi est-il nécessaire de réaliser un emballage secondaire ?

2. Raisons de l'encapsulation secondaire

Le premier point est d'éviter la duplication du code

Éviter la duplication du code se reflète principalement dans les points suivants :

1) Notre société appelle l'interface backend, En plus de l'interface de connexion, d'autres requêtes d'interface doivent ajouter le jeton dans l'en-tête de la requête. S'il n'est pas encapsulé, le jeton doit être transmis à chaque fois qu'une requête réseau est effectuée, ce qui est très gênant.

2) Lors des requêtes réseau, il est souvent nécessaire de prévoir une boîte de chargement pour avertir l'utilisateur qu'il est en cours de chargement.... Comme le montre la figure ci-dessous :

S'il n'y a pas d'encapsulation, il apparaîtra à chaque requête réseau. Boîte de chargement, vous devez écrire ce code à plusieurs reprises :

Lorsque la requête démarre, affichez la boîte de chargement.

Lorsque la requête se termine, masquez la boîte de chargement :

Deuxième point, évitez l'enfer des rappels

Si une page a plusieurs requêtes réseau et que les requêtes ont un certain ordre, wx. request est une opération asynchrone, donc le résultat le plus direct est le code suivant :

onLoad: function () {
    wx.request({
      url: 'https://test.com/api/test01',
      success:res=>{
        wx.request({
          url: 'https://test.com/api/test02',
          success: res=>{
            wx.request({
              url: 'https://test.com/api/test03',
              success: res=>{
                testDataList: res.content
              }
            })
          }
        })
      }
    })
  },

N'est-ce pas très similaire à une poupée matriochka russe ?

Afin d'éviter cette méthode d'écriture, elle est bien sûr encapsulée et Promise est utilisée ici.

Pour une introduction à Prolise, vous pouvez vous rendre sur le site officiel de Liao Xuefeng pour une introduction détaillée.

https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544

3. Implémentation d'un packaging spécifique

Structure du projet :

Créé sous le dossier utils Two fichiers.

1) httpUtils.js

Encapsulation des requêtes réseau, le code spécifique est le suivant :

const ui = require('./ui');
const BASE_URL = 'https://www.wanandroid.com'


/**
 * 网络请求request
 * obj.data 请求接口需要传递的数据
 * obj.showLoading 控制是否显示加载Loading 默认为false不显示
 * obj.contentType 默认为 application/json
 * obj.method 请求的方法  默认为GET
 * obj.url 请求的接口路径 
 * obj.message 加载数据提示语
 */
function request(obj) {
    return new Promise(function(resolve, reject) {
      if(obj.showLoading){
        ui.showLoading(obj.message? obj.message : '加载中...');
      }
      var data = {};
      if(obj.data) {
        data = obj.data;
      }
      var contentType = 'application/json';
      if(obj.contentType){
        contentType = obj.contentType;
      } 
  
      var method = 'GET';
      if(obj.method){
        method = obj.method;
      }
  
      wx.request({
        url: BASE_URL + obj.url,
        data: data,
        method: method,
        //添加请求头
        header: {
          'Content-Type': contentType ,
          'token': wx.getStorageSync('token') //获取保存的token
        },
        //请求成功
        success: function(res) {
          console.log('===============================================================================================')
          console.log('==    接口地址：' + obj.url);
          console.log('==    接口参数：' + JSON.stringify(data));
          console.log('==    请求类型：' + method);
          console.log("==    接口状态：" + res.statusCode);
          console.log("==    接口数据：" + JSON.stringify(res.data));
          console.log('===============================================================================================')
          if (res.statusCode == 200) {
            resolve(res);
          } else if (res.statusCode == 401) {//授权失效
            reject("登录已过期");
            jumpToLogin();//跳转到登录页
          } else {
            //请求失败
            reject("请求失败：" + res.statusCode)
          }
        },
        fail: function(err) {
          //服务器连接异常
          console.log('===============================================================================================')
          console.log('==    接口地址：' + url)
          console.log('==    接口参数：' + JSON.stringify(data))
          console.log('==    请求类型：' + method)
          console.log("==    服务器连接异常")
          console.log('===============================================================================================')
          reject("服务器连接异常，请检查网络再试");
        },
        complete: function() {
          ui.hideLoading();
        }
      })
    });
  }
  

  //跳转到登录页
  function jumpToLogin(){
    wx.reLaunch({
      url: '/pages/login/login',
    })
  }
  
  module.exports = {
    request,
  }

Il y a des commentaires détaillés dans le code, donc je ne l'expliquerai pas ici.

2) ui.js

est principalement une simple encapsulation des opérations wx UI, le code est le suivant :

export const showToast = function(content,duration) {
    if(!duration) duration = 2000
    wx.showToast({
        title: content,
        icon: 'none',
        duration: duration,
    })
  }
  
  var isShowLoading = false
  export const showLoading = function(title) {
    if(isShowLoading) return
    wx.showLoading({
        title: title?title:'',
        mask:true,
        success:()=>{
            isShowLoading = true
        }
    })
  }
  
  export const hideLoading = function() {
    if(!isShowLoading) return
    isShowLoading = false
    wx.hideLoading()
  }

3) L'appel spécifique

a fait une requête réseau dans l'index. js, plus précisément Le code est le suivant :

// index.js
const httpUtils = require('../../utils/httpUtils')
const ui = require('../../utils/ui')

Page({
  data: {
    str:null,
  },

  onLoad() {
  },

  //获取接口数据
  getNetInfo(){
    let obj = {
      method: "POST",
      showLoading: true,
      url:`/user/register?username=pppooo11&password=pppooo&repassword=pppooo`,
      message:"正在注册..."
    }
    httpUtils.request(obj).then(res=>{
      this.setData({
        str:JSON.stringify(res)
      })
      ui.showToast(res.data.errorMsg)
    }).catch(err=>{
      console.log('ERROR')
    });
  }
})

D'accord, c'est par ici Si le contenu ci-dessus vous est utile, n'oubliez pas de lui donner un like.

Le code a été téléchargé sur github Si vous êtes intéressé, vous pouvez cliquer pour télécharger.

https://github.com/YMAndroid/NetWorkDemo

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!