写小程序的你是否已经厌倦了发送网络请求的wx.request?接着看吧。。。
一、目录结构
在项目同级目录下utils文件夹里新建一个fetch.js文件,(名字看自己喜好)
二、直接上代码
// 定义网络请求API地址
const baseURL = \'http://yourbaseURL\'
// 封装网络请求开始
const http = ({ url, data, method, ...other } = {}) => {
let sessionKey = wx.getStorageSync(\'token\') // 以同步方式获取token避免异步操作出现延迟错误,具体可根据自己项目情况而定
// 我这里需要在除了登录后的所有接口拼接token,因此判断了url是否为登录接口由此添加不同的url拼接方式,具体可根据业务逻辑完善代码
var requestUrl = \'\'
if (url === \'/login/wxLogin\') {
requestUrl = baseURL + url
} else {
requestUrl = baseURL + url + "?sessionKey=" + sessionKey
}
// 添加请求加载等待
wx.showLoading({
title: \'加载中...\'
})
// Promise封装处理
return new Promise((resolve, reject) => {
wx.request({
// 请求地址拼接
url: requestUrl,
data: data,
// 获取请求头配置
header: { \'content-type\': \'application/x-www-form-urlencoded\' },
method: method,
...other,
// 成功或失败处理
complete: (res) => {
// 关闭等待
wx.hideLoading()
console.log(res)
// // 进行状态码判断并处理,退出登录
if (res.data.code === 8888) {
wx.navigateTo({
url: \'/pages/login/login\',
})
} else if (res.data.code !== 0) {
// 获取后台返回报错信息
let title = res.data.msg
// 调用全局toast方法
showToast(title)
} else if (res.data.code === 0) {
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
}
// 重构请求方式
const _fetch = (content) => {
return http({
url: content.url,
data: content.data,
method: content.method
})
}
module.exports = {
baseURL,
_fetch,
showToast
}
三、使用:
1、文件最上面引入:
let api = require(\'../../utils/fetch.js\')
2、使用
api._fetch({
url: \'/yourURL\',
data: {yourData},
method: \'get/post....\'
}).then((res) => {
// 请求成功后的处理
console.log(res.data)
......
})
注意
1、promise为异步请求,在fetch.js中使用wx.getStorage获取token时,会比请求慢一步,因此会出现所取的token值有问题。小程序中在使用promise时使用同步的方式获取token--**wx.getStorageSync(\'token\') **
2、大多数业务并非选择url拼接token的方式发送请求,而是将token存入header中一并带入,示例 点击这里
请发表评论