1.先在小程序app.js设置一个全局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过期后再次登录的参数
（2）.封装请求头
type为传入的参数用于判断POST请求是否为JSON方式传递参数
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请求，数据在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: 服务端业务处理正常结束
if (res.statusCode === 200) {
//可在请求加入加载弹窗
// wx.showLoading({
// title: '加载中',
// })
//wx.hideLoading()
//401是后台返回的code 用于判断用户是否token失效 如果token失效了给出弹窗提示并跳转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请求，数据按照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: 服务端业务处理正常结束
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）.导出模块
由于小程序内部是采用 CommonJs 进行?？榈墓芾碛氪?，所以我们自己封装?？槭?，也要遵循 CommonJs 规范。
module.exports.postRequest = postRequest;
module.exports.postParamsRequest = postParamsRequest;
到此，整个request.js已经完成了
3.使用（引入request.js并使用）我个人一般把小程序的接口放在一个js文件中（requestAddress.js）也放在utils文件夹下面
（1）.引入?？?/p>
import {
postRequest,
putRequest,
} from './request'
// （例子）登录
export const login = data => postRequest(`/api/customer/auth/login`, data);
4.页面内使用（引入request.js并使用）
import {
login,
} from '../../utils/requestAddress.js'
login({
}).then(res => {
console.log(res
}).catch(err => {
console.log(err)
})
