好久没发文章了,最近浏览社区看到比较多的请求封装,以及还有在使用原始请求的童鞋。为了减少代码,提升观赏性,我也水一篇吧,希望对大家有所帮助。
默认请求方式,大家每次都这样一些写相同的代码,会不会觉得烦,反正我是觉得头大 😂
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
来,进入正题吧,把这块代码封装下。
首先新建个request文件夹,内含request.js
代码如下:
/**
* 网络请求封装
*/
import config from '../config/config.js'
import util from '../util/util.js'
// 获取接口地址
const _getPath = path => (config.DOMAIN + path)
// 封装接口公共参数
const _getParams = (data = {}) => {
const timestamp = Date.now() //时间戳
const deviceId = Math.random() //随机数
const version = data.version || config.version //当前版本号,自定或者取小程序的都行
const appKey = data.appKey || config.appKey //某个小程序或者客户端的字段区分
//加密下,防止其他人随意刷接口,加密目前采用的md5,后端进行校验,这段里面的参数你们自定,别让其他人知道就行,我这里就是举个例子
const sign = data.sign || util.md5(config.appKey + timestamp + deviceId)
return Object.assign({}, {
timestamp,
sign,
deviceId,
version,
appKey
}, data)
}
// 修改接口默认content-type请求头
const _getHeader = (headers = {}) => {
return Object.assign({
'content-type': `application/x-www-form-urlencoded`
}, headers)
}
// 存储登录态失效的跳转
const _handleCode = (res) => {
const {statusCode} = res
const {msg, code} = res.data
// code为 4004 时一般表示storage里存储的token失效或者未登录
if (statusCode === 200 && (code === 4004)) {
wx.navigateTo({
url: '/pages/login/login'
})
}
return true
}
/**
* get 请求, post 请求
* @param {String} path 请求url,必须
* @param {Object} params 请求参数,可选
* @param {String} method 请求方式 默认为 POST
* @param {Object} option 可选配置,如设置请求头 { headers:{} }
*
* option = {
* headers: {} // 请求头
* }
*
*/
export const postAjax = (path, params) => {
const url = _getPath(path)
const data = _getParams(params)
//如果某个参数值为undefined,则删掉该字段,不传给后端
for (let e in data) {
if (data[e] === 'undefined') {
delete data[e]
}
}
// 处理请求头,加上最近比较流行的jwtToken(具体的自己百度去)
const header = util.extend(
true, {
"content-type": "application/x-www-form-urlencoded",
'Authorization': wx.getStorageSync('jwtToken') ? `Bearer ${wx.getStorageSync('jwtToken')}` : '',
},
header
);
const method = 'POST'
return new Promise((resolve, reject) => {
wx.request({
url,
method,
data,
header,
success: (res) => {
const result = _handleCode(res)
result && resolve(res.data)
},
fail: function (res) {
reject(res.data)
}
});
})
}
那么如何调用呢?
//把request的 postAjax注册到getApp()下,调用时:
const app = getApp()
let postData = {
//这里填写请求参数,基础参数里的appKey等参数可在这里覆盖传入。
}
app.postAjax(url, postData).then((res) => {
if (res.success) {
//这里处理请求成功逻辑。
} else {
//wx.showToast大家觉得麻烦也可以写到util.js里,调用时:util.toast(msg) 即可。
wx.showToast({
title: res.msg || '服务器错误,请稍后重试',
icon: "none"
})
}
}).catch(err => {
//这里根据自己场景看是否封装到request.js里
console.log(err)
})
config.js 主要是处理正式环境、预发环境、测试环境、开发环境的配置
//发版须修改version, env
const env = {
dev: {
DOMAIN: 'https://dev-api.weixin.com'
},
test: {
DOMAIN: 'https://test-api.weixin.com',
},
pro: {
DOMAIN: 'https://api.qtshe.com'
}
}
module.exports = {
...env.pro
}
大佬请问 正式环境、预发环境、测试环境、开发环境如何切换呢?
直接修改下面的 env.test / env.dev / env.pro,这样子吗?
env.test(测试环境)
env.pre (预发环境)
env.pro (正式环境)
但是都得在这里配置:
老规矩,先占楼
小机灵鬼
你好,超时能处理吗?
大佬,后台php如何判断传入的数据的
大佬我把刷新token的接口替换了wx.navigateTo({}),不会再用户无感知的情况下刷新token么
// 存储登录态失效的跳转
const _handleCode = (res) => {
const {statusCode} = res
const {msg, code} = res.data
// code为 4004 时一般表示storage里存储的token失效或者未登录
if (statusCode === 200 && (code === 4004)) {
wx.navigateTo({
url: '/pages/login/login'
})
}
return true
}
楼主,那个代码片段打不开啊
大佬../util/util.js,这个里面的代码什么呀?util.extend这个方法有用到
谢谢大佬分享,萌新直接复制粘贴。