开始写小程序的时候对小程序请求接口的 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 也是一样的方式,这里就不过多演示了
希望大家能提出积极的建议,有问题可以联系我