一、http模塊分裝首先我們?yōu)槭裁匆シ盅b微信的http模塊呢，我們先看一下微信自帶的http請求它的一個寫法wx.request({
url: '
test.php'
, //僅為示例，并非真實(shí)的接口地址 data: {
x: '
'
, y: '
'
}
, header: {
'
content-type'
: '
application/json'
// 默認(rèn)值 }
, success (res) {
console.log(res.data) }
}
)這種請求方式呢類似我們古老的jquery方式的分裝，我們需要在success的回調(diào)函數(shù)里面做一些業(yè)務(wù)操作，這種方式會形成我們的回調(diào)地獄問題，同時(shí)代碼也不夠直觀，以及代碼過于繁瑣；接下來我會通過promise的這種方式對于代碼進(jìn)行分裝，將請求方式做一些簡化一、項(xiàng)目目錄構(gòu)建在utils目錄下邊創(chuàng)建request.js文件，去做http請求封裝，我們是通過promise這種方式進(jìn)行封裝，這樣有利于我們對于錯誤的處理，也可以很直觀的查看業(yè)務(wù)邏輯，封裝示例代碼如下：
/** * * @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)=>{
// 需要我們加上統(tǒng)一的錯誤處理代碼 reject(res) }
, complete: ()=>{
}
}
);
}
) }
// 封裝方法 // 如果對于header有什么特殊的要求，可以在請求參數(shù)里面做一些添加，例如后續(xù)我們會在headder中加入我們的sessionkey這些內(nèi)容 // header = {
}
里面添加header內(nèi)容 // 這塊是一個簡版的說明 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, }
二、項(xiàng)目中請求的使用首先我們在使用的位置引入我們封裝好的http模塊import webHttp from '
./utils/request'
;
接下里我們可以使用我們封裝好的webhttp工具，比之前直接用微信的request請求方式代碼量降低，同時(shí)鏈?zhǔn)椒绞绞沟眠壿嫺忧逦鷚ebHttp.get(api.user.info, {
// nick_name: ...self.globalData.userInfo }
).then((res) => {
console.log(res);
}
)大概上是這樣的一個過程，實(shí)際過程中可能根據(jù)后端restful api的方式需要對封裝繼續(xù)完善，同樣是對于post請求的data參數(shù)也有不同的處理，這個需要按照實(shí)際情況做出相應(yīng)的調(diào)整，如果本篇文章有幫助到你，歡迎收藏點(diǎn)贊，同樣有什么地方有更好的方式歡迎交流，進(jìn)步永不停息推薦教程：
《微信小程序》以上就是自學(xué)微信小程序從零到一：
項(xiàng)目構(gòu)建后http請求封裝的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
微信小程序本文轉(zhuǎn)載于：
掘金社區(qū)，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
微信小程序圖片無法顯示怎么辦？
下一篇：
微信小程序開發(fā)BUG經(jīng)驗(yàn)的一些總結(jié)相關(guān)文章相關(guān)視頻微信小程序中使用echarts微信小程序 絕對路徑 require微信小程序中為什么不使用骨架屏，來提升用戶體驗(yàn)？微信小程序圖片無法顯示怎么辦？自學(xué)微信小程序從零到一：
項(xiàng)目構(gòu)建后http請求封裝初識微信小程序(1)深入了解微信小程序(一)深入了解微信小程序(三) [溫州做小程序]