一、前言
小程序使用wx.request(OBJECT)发送网络请求，并且支持es6，那么就可以使用promise的方式来进行封装网络请求了。如果你想了解wx.request(OBJECT)的具体配置请点击这里
本小程序网络请求封装具备以下特点
封装位置：api.js，全局引入调用，跟app.js分开，互不干扰，相互独立；
api方法调用，你可以实现跟Axios一样的调用；
默认和自定义的请求成功、失败和完成的回调处理
可设置请求失败自动重新请求的次数
可以防止重复提交网络请求
每个请求设定requestCode
设置接口鉴权和token刷新操作
二、封装开始
以下为api.js 的封装实例
// 获取小程序全局配置（变量、函数等）
const app = getApp()
// 定义网络请求API地址
const baseURL = '这里为你的api地址'
// 封装网络请求开始
const http = ({url,data,method,...other} = {}) => {
// 添加请求加载等待
wx.showLoading({
title: '加载中...'
})
// Promise封装处理
return new Promise((resolve, reject) => {
wx.request({
// 请求地址拼接
url: baseURL+url,
data: data,
// 获取请求头配置
header: getHeader(),
method: method,
...other,
// 成功或失败处理
complete: (res) => {
// 关闭等待
wx.hideLoading()
// 进行状态码判断并处理
if(res.statusCode === 204){
resolve(res)
}else if (res.statusCode === 401) {
// 检测到状态码401，进行token刷新并重新请求等操作
refreshToken().then(()=>_refetch(url,data,method)).then(resolve)
}else if(res.data.code !== 200){
// 获取后台返回报错信息
let title = res.data.err_msg
// 调用全局toast方法
showToast(title)
}else if(res.data.code === 200){
resolve(res)
}else {
reject(res)
}
}
})
})
}
// 添加请求toast提示
const showToast = title =>{
wx.showToast({
title: title,
icon: 'none',
duration: 1500,
mask:true
});
}
// 进行url字符串拼接
const getUrl = url => {
if (url.indexOf('://') == -1) {
url = baseURL + url
}
return url
}
//获取用户userToken
function getHeader(){
// 判断登录token是否存在
if(wx.getStorageSync('userToken')){
// 获取token并设置请求头
var token = wx.getStorageSync('userToken')
let auth = {
'Authorization': token.token_type +" "+ token.access_token
}
return auth
}
}
// 重构请求方式
const _fetch = (content) => {
return http({
url:content.url,
data:content.data,
method:content.method
})
}
// 添加刷新之后的操作处理方法
const refreshToken = () => {
return new Promise((resolve, reject) => {
// 获取token
var token = wx.getStorageSync('userToken')
// 设置请求data
let params = {
refresh_token:token.refresh_token
}
// 进行token刷新请求
wx.request({
url: getUrl('/app/connect/refresh'),
data:params,
// 设置请求header 鉴权
header: {
'Authorization': token.token_type +" "+ token.access_token
},
method:'post',
// 请求响应处理
complete: (res) => {
if(res.data.code === 200 ){
// 全局存储token
app.globalData.usertToken = res.data.data
// Storage存储token
wx.setStorage({
key:"userToken",
data:res.data.data,
// 存储成功处理
success:function(){
resolve()
}
})
}
}
})
});
}
const _refetch = (url,data,method) => {
return http({
url:url,
data:data,
method:method
})
}
//除开上面的调用方式之外，你也可以使用下面的这些方法，只需要关注是否传入method
// get、post、put、delete、_refetch方法暂不处理
const _get = (url, params = {}) => {
return http({
url,
params
})
}
const _post = (url, params = {}) => {
return http({
url,
params,
method: 'post'
})
}
const _put = (url, params = {}) => {
return http({
url,
params,
method: 'put'
})
}
const _delete = (url, params = {}) =>{
return http({
url,
params,
method: 'delete'
})
}
module.exports = {
baseURL,
refreshToken,
_fetch,
_refetch,
_get,
_post,
_put,
_delete
}
调用方式
get方式
const api = require('../../utils/api.js')
api._fetch({
url: '/list',
data:data,
}).then(function (res) {
console.info(res)
}).catch(function (error) {
console.log(error);
});
post方式
const api = require('../../utils/api.js')
api._fetch({
url: '/list',
data:data,
method:'post'
}).then(function (res) {
console.info(res)
}).catch(function (error) {
console.log(error);
});
自定义方式
const api = require('../../utils/api.js')
// 单个请求
api.get('list').then(res => {
console.log(res)
}).catch(e => {
console.log(e)
})
// 一个页面多个请求
Promise.all([
api.get('list'),
api.get('list2')
]).then(result => {
console.log(result)
}).catch(e => {
console.log(e)
})
三、后记
此封装纯属个人自用，为了方便大家使用，已进行部分修改和整理。如果你有任何疑问或者建议，欢迎留言进行评论。如果你觉得帮助到了你，请分享给更多的人。感谢你的支持！！！