So kapseln Sie Netzwerkanfragen in einem Miniprogramm neu

Dieser Artikel stellt Ihnen die Netzwerkanforderungskapselung bei der Entwicklung des WeChat-Applets vor, spricht über die Gründe für die sekundäre Kapselung und die spezifische Kapselungsimplementierung. Ich hoffe, dass er für alle hilfreich ist!

1. Hintergrund

Bei der Entwicklung von WeChat-Miniprogrammen sind zwangsläufig folgende Netzwerkanforderungs-APIs beteiligt: ​​

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

Unter ihnen:

• URL: ist die Hintergrundschnittstellenadresse der Anforderung;

• Daten: ist der Parameter, den die Anforderungsschnittstelle tragen muss;

• Header: legt den Anforderungsheader fest, content-type ist standardmäßig application/json,

• Erfolg: Ist die Anfrage erfolgreich? Nach dem Rückruf enthält res die Daten, die nach erfolgreicher Anfrage zurückgegeben werden.

Weitere Informationen zur Verwendung von wx.request finden Sie in der offiziellen Einführung.

RequestTask |. WeChat Open Document

Da die offizielle API bereitgestellt wurde, warum muss sie dann neu gekapselt werden?

2. Gründe für die sekundäre Kapselung

Der erste Punkt besteht darin, Duplikate von Code zu vermeiden

Die Vermeidung von Duplikaten von Code spiegelt sich hauptsächlich in den folgenden Punkten wider:

1) Unser Unternehmen nennt die Backend-Schnittstelle, Zusätzlich zur Anmeldeschnittstelle müssen andere Schnittstellenanforderungen das Token im Anforderungsheader hinzufügen. Ohne Kapselung muss das Token bei jeder Netzwerkanforderung übergeben werden, was sehr problematisch ist.

2) Bei Netzwerkanfragen ist es häufig erforderlich, eine Ladebox bereitzustellen, um den Benutzer darüber zu informieren, dass geladen wird Bei jeder Netzwerkanfrage wird ein Ladefeld angezeigt. Sie müssen diesen Code wiederholt schreiben:

Wenn die Anfrage startet, zeigen Sie das Ladefeld an.

Wenn die Anfrage endet, blenden Sie das Ladefeld aus:

Zweiter Punkt: Vermeiden Sie die Rückrufhölle

Wenn eine Seite mehrere Netzwerkanfragen hat und die Anfragen eine bestimmte Reihenfolge haben, wx. request ist ein asynchroner Vorgang, daher ist das direkteste Ergebnis der folgende Code:

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
              }
            })
          }
        })
      }
    })
  },

Ist es nicht sehr ähnlich zu einer russischen Matroschka-Puppe? Um diese Schreibweise zu vermeiden, wird hier natürlich gekapselt und Promise verwendet.

Eine ausführliche Einführung in Prolise finden Sie auf der offiziellen Website von Liao Xuefeng.

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

3. Spezifische Verpackungsimplementierung

Projektstruktur:

Erstellt unter dem Utils-Ordner Zwei Dateien.

1) httpUtils.js

Kapselung von Netzwerkanforderungen, der spezifische Code lautet wie folgt:

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,
  }

Der Code enthält detaillierte Kommentare, daher werde ich ihn hier nicht erklären. 2) ui.js js, speziell Der Code lautet wie folgt:

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()
  }

Okay, er ist hier drüben. Wenn der obige Inhalt für Sie hilfreich ist, vergessen Sie nicht, ihm ein „Gefällt mir“ zu geben.

Der Code wurde auf Github hochgeladen. Wenn Sie interessiert sind, können Sie zum Herunterladen klicken.

https://github.com/YMAndroid/NetWorkDemo

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonSo kapseln Sie Netzwerkanfragen in einem Miniprogramm neu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!