1.先在小程序app.js設(shè)置一個全局data用于存放接口地址
globalData: {
apiHost:'https://www/xxx/xxx/'
}
2.在utils包里面建一個request.js文件用于封裝各類請求
（1）.獲取全局變量（接口地址）
const app = getApp();
var serverUrl = app.globalData.apiHost;
let flag = true;
//flage是判斷用戶是否登錄以及token過期后再次登錄的參數(shù)
（2）.封裝請求頭
type為傳入的參數(shù)用于判斷POST請求是否為JSON方式傳遞參數(shù)
function CreateHeader(url, type) {
let header = {}
if (type == 'POST_PARAMS') {
header = {
'content-type': 'application/json',
'token': wx.getStorageSync('token')
}
} else {
header = {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
'token': wx.getStorageSync('token')
}
}
return header;
}
（3）.封裝各類請求方式（以POST請求為例）
//post請求，數(shù)據(jù)在body中
function postRequest(url, data) {
// 拿到上面的請求頭header以及serverUrl（接口地址）url為接口
let header = CreateHeader(url, 'POST');
return new Promise((resolve, reject) => {
wx.request({
url: serverUrl + url,
data: data,
header: header,
method: 'POST',
success: (res => {
var data = res.data
//200: 服務(wù)端業(yè)務(wù)處理正常結(jié)束
if (res.statusCode === 200) {
//可在請求加入加載彈窗
// wx.showLoading({
// title: '加載中',
// })
//wx.hideLoading()
//401是后臺返回的code 用于判斷用戶是否token失效 如果token失效了給出彈窗提示并跳轉(zhuǎn)login頁面
//如果接口請求報錯則給出提示彈窗
if (res.data.code == 401) {
if(flag){
flag = false;
wx.showToast({
title: '請先登錄',
icon: 'none',
duration: 1500,
success() {
var timer = setTimeout(function () {
flag = true;
wx.navigateTo({
url: `/pages/login/login`,
})
clearTimeout(timer)
}, 1600);
}
})
}
} else if (res.data.code == 500) {
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 1500,
})
}
resolve(data)
} else {
//wx.hideLoading()
reject(data)
}
}),
fail: (res => {
//wx.hideLoading()
reject(res)
})
})
})
}
//post請求蛇券，數(shù)據(jù)按照query方式傳給后端
function postParamsRequest(url, data) {
let header = CreateHeader(url, 'POST_PARAMS');
let useurl = url;
return new Promise((resolve, reject) => {
wx.request({
url: serverUrl + useurl,
data: data,
header: header,
method: 'POST',
success: (res => {
var data = res.data
if (res.statusCode === 200) {
wx.hideLoading()
//200: 服務(wù)端業(yè)務(wù)處理正常結(jié)束
if (res.data.code == 401) {
if(flag){
flag = false;
wx.showToast({
title: '請先登錄',
icon: 'none',
duration: 1500,
success() {
var timer = setTimeout(function () {
flag = true;
wx.navigateTo({
url: `/pages/login/login`,
})
clearTimeout(timer)
}, 1600);
}
})
}
} else if (res.data.code == 500) {
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 1500,
})
}
resolve(data)
} else {
wx.hideLoading()
reject(data)
}
}),
fail: (res => {
wx.hideLoading()
reject(res)
})
})
})
}
（4）.導(dǎo)出模塊
由于小程序內(nèi)部是采用 CommonJs 進(jìn)行模塊的管理與處理，所以我們自己封裝模塊時，也要遵循 CommonJs 規(guī)范。
module.exports.postRequest = postRequest;
module.exports.postParamsRequest = postParamsRequest;
到此囱桨，整個request.js已經(jīng)完成了
3.使用（引入request.js并使用）我個人一般把小程序的接口放在一個js文件中（requestAddress.js）也放在utils文件夾下面
（1）.引入模塊
import {
postRequest,
putRequest,
} from './request'
// （例子）登錄
export const login = data => postRequest(`/api/customer/auth/login`, data);
4.頁面內(nèi)使用（引入request.js并使用）
import {
login,
} from '../../utils/requestAddress.js'
login({
}).then(res => {
console.log(res
}).catch(err => {
console.log(err)
})
