Artikel ini akan memperkenalkan kepada anda enkapsulasi permintaan rangkaian dalam pembangunan applet WeChat, bercakap tentang sebab untuk enkapsulasi sekunder, dan pelaksanaan enkapsulasi khusus saya harap ia akan membantu semua orang!
Apabila membangunkan program mini WeChat, tidak dapat dielakkan bahawa operasi permintaan rangkaian akan terlibat menyediakan API yang diminta oleh rangkaian asli adalah seperti berikut:
wx.request({ url: 'https://test.com/******', //仅为示例,并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) } })
di mana:
url: ialah alamat antara muka bahagian belakang yang diminta;
kejayaan: ialah panggilan balik selepas permintaan berjaya, res mengandungi data yang dikembalikan selepas permintaan berjaya.
content-type
RequestTask |.
Mengelakkan pertindihan kod terutamanya ditunjukkan dalam perkara berikut:
Jika tiada enkapsulasi, jika anda perlu memaparkan kotak pemuatan pada setiap permintaan rangkaian, anda perlu menulis kod ini berulang kali:
Apabila permintaan bermula, paparkan kotak memuatkan.
Apabila permintaan tamat, sembunyikan kotak pemuatan:Mata kedua, elakkan Panggil balik neraka
Jika halaman mempunyai berbilang permintaan rangkaian, dan permintaan itu mempunyai susunan tertentu, wx.request ialah operasi tak segerak, maka hasil paling langsung adalah seperti berikut:
Bukankah ia kelihatan seperti anak patung matryoshka Rusia?
Bagi mengelak kaedah penulisan ini, sudah tentu ia dirangkumkan dan Janji digunakan di sini.Untuk pengenalan kepada Prolise, anda boleh pergi ke tapak web rasmi Liao Xuefeng untuk pengenalan terperinci. https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544
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 } }) } }) } }) },
Dua fail baharu telah dicipta dalam folder utils.
Pengenkapsulan permintaan rangkaian, kod khusus adalah seperti berikut:
Terdapat Ulasan terperinci tidak akan dijelaskan di sini.
2) ui.js terutamanya enkapsulasi ringkas bagi operasi UI wx adalah seperti berikut:
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, }
3) Panggil secara khusus
untuk membuat permintaan rangkaian dalam index.js Kod khusus adalah seperti berikut:
Baiklah, di sini kita pergi Itu penghujungnya di sini Jika kandungan di atas membantu anda, jangan lupa untuk memberinya suka.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() }
https://github.com/YMAndroid/NetWorkDemoUntuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:
Pengenalan kepada Pengaturcaraan! !
Atas ialah kandungan terperinci Bagaimana untuk merangkum semula permintaan rangkaian dalam program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!