开始写小程序的时候对小程序请求接口的requestAPI相当无奈,因为项目急就没考虑那么多,直接开干。后边闲下来就考虑了一下做了一个封装,来统一做一些数据处理,达到减轻开发重复性,优化代码的作用:
首先我封装了一个类:
import { base_url } from '../config/api' // 引入我们接口的ip,后续我们只需要传入api
const tips = {
1: '抱歉,出现了一个错误',
1005: 'appkey无效,请求错误',
3000: '没有权限',
...
} // 多种错误处理字符串
----------
export default class HTTP {
fetch (params) {
const {
url,
method = 'GET',
data = {},
success
} = params // es6对象解构请求是我们需要的传参和成功的处理
wx.request({
url: base_url + url,
method,
data,
header: {
'Content-Type': 'application/json'
},
success: res => {
const { code } = res.data
if (code === 0) { // 与后台约定的成功判断
success && success(res.data) // 成功的回调
return
}
const { error_code } = res.data
this._show_error(error_code) // 失败的处理,弹出提示框
},
fail: err => {
this._show_error(1) // 失败的处理,弹出提示框
}
})
}
_show_error (error_code = 1) {
const tip = tips[error_code]
wx.showToast({
title: tip ? tip : tips[1],
icon: 'none',
duration: 2000
})
}
}
这里,我们做了一个简单的基础封装,但是也是必须从回调中做出相应的处理,如果我们需要一个变量直接拿到这次请求的数据呢,那我们就需要用到promise, async await 来进行处理了,代码如下:
import { base_url } from '../config/api' // 引入我们接口的ip,后续我们只需要传入api
const tips = {
1: '抱歉,出现了一个错误',
1005: 'appkey无效,请求错误',
3000: '没有权限',
...
} // 多种错误处理字符串
export default class HTTP {
fetch (params) {
return new Promise((resolve, reject) => {
const {
url,
method = 'GET',
data = {},
success
} = params // es6对象解构请求是我们需要的传参和成功的处理
wx.showLoading('加载中')
wx.request({
url: base_url + url,
method,
data,
header: {
'Content-Type': 'application/json'
},
success: res => {
const {
data = {}, // data默认是一个对象
data : { code, msg }
} = res
if (code === 0) { // 与后台约定的成功判断
wx.showToast({ title: msg })
resolve([null, _data]) // 成功的回调
return
}
const { error_code } = res.data
this._show_error(error_code) // 失败的处理,弹出提示框
reject([data]) // 失败的回调,并暴露出数据
},
fail: err => {
this._show_error(1) // 失败的处理,弹出提示框
reject([{msg = '请求出错'}]) // 失败处理
},
complete: () => {
wx.hideLoading('加载中')
}
}).catch(err => err)
}
})
_show_error (error_code = 1) {
const tip = tips[error_code]
wx.showToast({
title: tip ? tip : tips[1],
icon: 'none',
duration: 2000
})
}
}
然后我们在调用的时候直接利用async和await:
import HTTP from '../util/HTTP '
import api from '../api' // 引入接口
class Model extends HTTP {
async search (data) {
const [err, res] = await this.Fetch({
url: api,
data
})
if(err){
//失败做的对应处理
return
}
// 成功的对应处理
}
}
如果不采用继承的方式,那么直接实例化HTTP然后调取fetch也是一样的方式,这里就不过多演示了
希望大家能提出积极的建议,有问题可以联系我