一、http模組分裝
首先我們為什麼要去分裝微信的http模組呢,我們先看一下微信自帶的http請求它的一個寫法
wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) } })
這種請求方式呢類似我們古老的jquery方式的分裝,我們需要在success的回調函數裡面做一些業務操作,這種方式會形成我們的回調地獄問題,同時代碼也不夠直觀,以及程式碼過於繁瑣;
接下來我會透過promise的這種方式對於程式碼進行分裝,將請求方式做一些簡化
一、專案目錄建置
在utils目錄下邊建立request.js文件,去做http請求封裝,我們是透過promise這種方式進行封裝,這樣有利於我們對於錯誤的處理,也可以很直覺的查看業務邏輯,封裝範例程式碼如下:
/** * * @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, }
二、專案中請求的使用
首先我們在使用的位置引入我們封裝好的http模組
import webHttp from './utils/request';
接下裡我們可以使用我們封裝好的webhttp工具,比之前直接用微信的request請求方式代碼量降低,同時鍊式方式使得邏輯更加清晰
webHttp.get(api.user.info, { // nick_name: ...self.globalData.userInfo }).then((res) => { console.log(res); })
大概上是這樣的一個過程,實際過程中可能根據後端restful api的方式需要對封裝繼續完善,同樣是對於post請求的data參數也有不同的處理,這個需要按照實際情況做出相應的調整,如果這篇文章有幫助到你,歡迎收藏點贊,同樣有什麼地方有更好的方式歡迎交流,進步永不停息
推薦教程:《微信小程式》
以上是自學微信小程式從零到一:專案建構後http請求封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章!