Heim >WeChat-Applet >Mini-Programmentwicklung >Selbststudium des WeChat-Applets von Null auf Eins: HTTP-Anfragekapselung nach der Projekterstellung
1. Neuzusammenstellung des http-Moduls
Warum sollten wir zunächst das WeChat-http-Modul neu verpacken?
rrreeDiese Anforderungsmethode ähnelt unserer alten Jquery-Methode. Diese Methode führt zu unserem Rückruf-Höllenproblem und der Code ist zu umständlich.
Als nächstes werde ich den Code durch Versprechen verpacken und die Anforderungsmethode vereinfachen
1 Projektverzeichnisaufbau
Erstellen Sie die Datei „request.js“ im Verzeichnis „utils“, um die HTTP-Anfrage zu kapseln. Dies ist für uns hilfreich, um Fehler zu behandeln, und wir können auch die Geschäftslogik anzeigen Sehr intuitiv. Der gekapselte Beispielcode lautet wie folgt:
wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) } })
2. Die Verwendung von Anfragen im Projekt
Zunächst stellen wir unser gekapseltes http-Modul vor Verwendungsort
/** * * @param {String} url * @param {Object} data * @param {String} method * @param {String} header */ function request(url, data={}, method='GET', header="Content-Type: application/json",) { return new Promise(function (resolve, reject) { wx.request({ url: url, data: data, header: header, method: method, dataType: 'json', responseType: 'text', success: (res)=>{ if(res.statusCode === 200) { if (res.data.code === 200) { resolve(res.data) } else { wx.showToast({ title: res.data.msg, icon: 'none', image: '', duration: 1500, mask: false, success: (result)=>{ resolve(res.data); }, }); } } else { } }, fail: (res)=>{ // 需要我们加上统一的错误处理代码 reject(res) }, complete: ()=>{} }); }) } // 封装方法 // 如果对于header有什么特殊的要求,可以在请求参数里面做一些添加,例如后续我们会在headder中加入我们的sessionkey这些内容 // header = {}里面添加header内容 // 这块是一个简版的说明 const header = { "Content-Type": "application/json", // 这个token是微信登录以后,将token存入在缓存中 "token": "*****************" } const get = function(url, data, header) { return request(url, data, 'GET', header); } const post = function(url, data, header) { return request(url, data, 'POST', header); } const del = function(url, data, header) { return request(url, data, '', header); } module.exports = { get, post, del, }
Als Nächstes können wir unser gekapseltes Webhttp-Tool verwenden, wodurch die Codemenge im Vergleich zur vorherigen direkten Verwendung der Request-Request-Methode von WeChat reduziert wird. Gleichzeitig wird die Kettenmethode klarer
import webHttp from './utils/request';
Es handelt sich ungefähr um einen Prozess wie diesen. Im tatsächlichen Prozess muss die Kapselung möglicherweise entsprechend der Back-End-Restful-API-Methode weiter verbessert werden. Die Datenparameter der Post-Anfrage werden ebenfalls anders verarbeitet. Dies erfordert entsprechende Anpassungen entsprechend der tatsächlichen Situation. Wenn es einen besseren Weg gibt, können Sie ihn gerne mitteilen
Empfohlenes Tutorial: „WeChat Mini-Programm》
Das obige ist der detaillierte Inhalt vonSelbststudium des WeChat-Applets von Null auf Eins: HTTP-Anfragekapselung nach der Projekterstellung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!