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!
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-typeist 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.
Da die offizielle API bereitgestellt wurde, warum muss sie dann neu gekapselt werden?
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 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 } }) } }) } }) },
3. Spezifische Verpackungsimplementierung
Projektstruktur:
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, }
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() }
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!
