如何实现一个简单的http请求的封装
好久没发文章了，最近浏览社区看到比较多的请求封装，以及还有在使用原始请求的童鞋。为了减少代码，提升观赏性，我也水一篇吧，希望对大家有所帮助。
默认请求方式，大家每次都这样一些写相同的代码，会不会觉得烦，反正我是觉得头大 😂
[代码]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
}
[代码]
以上就是简单的一个request的封装，包含登录态失效统一跳转、包含公共参数的统一封装。
老规矩，最后放代码片段，util里内置了md5方法以及深拷贝方法，具体的我也不啰嗦，大家自行查看即可～
https://developers.weixin.qq.com/s/gbPSLOmd7Aft
