好记性不如烂笔头
网络请求是小程序中必不可少的一部分，而且使用频率也很高，虽然小程序提供的网络请求组件已经封装的很方便，但还是有必要根据业务具体封装一下，还是那一句话：不轻视任何一个知识点！
一、 响应式
1. 封装
① 创建
http.js文件， 定义HTTP类
② 定义公用请求方法
③ 导出当前类
http.js文件，这是我根据我后台的逻辑封装的响应式HTTP请求工具
我后台的规则是000000代表请求成功，000005代表token失效需要重新登录
class HTTP {
request(params) {
if (!params.method) {
params.method = 'GET'
}
wx.request({
url: '主网址' + params.url,
method: params.method,
data: params.data,
header: {
'content-type': 'application/json'
},
success: (res) => {
let code = res.data.resp_code.toString()
if (code == '000000') {
params.success && params.success(res.data)
}else if (code == '000005') {
this. _showToast('token失效，请重新登录')
}else {
let msg = res.data.resp_message
this._showToast(msg)
}
},
fail: (err) => {
this._showToast('请求出错，请稍后重试')
}
})
}
_showToast(title) {
wx.showToast({
title: title,
icon: 'none',
duration: 2000
})
}
}
export {HTTP}
2. 调用
① 引入封装好的HTTP工具类
② 声明HTTP
③ 请求数据
import {
HTTP
} from '../util/http.js'
const http = new HTTP()
// GET
http.request({
url: '',
success: (res) => {
// res 后台返回的数据
}
})
//POST
http.request({
url: '',
method: 'POST',
data: {
art_id: '',
type: ''
},
success: (res) => {
// res 后台返回的数据
}
})
3. 再封装
可以根据具体的业务逻辑对HTTP工具进行再一次的封装，简化请求的调用，使得业务逻辑更加的清晰。比如我要获取图书信息，以下是bookModel.js文件代码，所有和图书相关的请求方法都可以封装在这个文件中
①创建
js文件，比如bookModel.js，并引入HTTP
②定义类，比如BookModel，并继承定义的HTTP类，方便调用HTTP请求方法
③获取对应数据，并回调出去
④导出当前类
import {
HTTP
} from '../util/http.js'
class BookModel extends HTTP {
// 获取图书信息
getBookInfo(sCallback) {
this.request({
url: '',
method: 'POST',
data: {
id: '',
type: ''
},
success: (res) => {
sCallback(res)
}
})
}
}
export { BookModel }
调用的时候只需要引入
BookModel并声明，直接调用getBookInfo即可
import {
BookModel
} from '../../models/bookModel.js'
let bookModel = new BookModel()
// 获取图书信息
bookModel.getBookInfo((res) => {
// res 获取到的数据
})
二、Promise链式
Promise是以另一种方式封装HTTP请求，这种方式可以很好的解决回调地狱问题，即请求回调嵌套请求的问题，废话不多说，直接上代码
1. 封装
http-p.js文件
class HTTP {
request({url, data = {}, method = 'GET'}) {
return new Promise((resolve, reject) => {
this._request(url, resolve, reject, data, method)
})
}
_request(url, resolve, reject, data, method) {
wx.request({
url: '主网址' +url,
method: method,
data: data,
header: {
'content-type': 'application/json'
},
success: (res) => {
let code = res.data.resp_code.toString()
if (code == '000000') {
resolve(res.data)
}else if (code == '000005') {
reject()
this. _showToast('token失效，请重新登录')
}else {
reject()
let msg = res.data.resp_message
this._showToast(msg)
}
},
fail: (err) => {
reject()
this._showToast('请求出错，请稍后重试')
}
})
}
_showToast(title) {
wx.showToast({
title: title,
icon: 'none',
duration: 2000
})
}
}
export { HTTP }
2. 再封装
bookModel.js文件代码
import {
HTTP
} from '../util/http-p.js'
class BookModel extends HTTP {
// 获取图书信息1
getBookInfo1() {
return this.request({
url: '',
method: 'POST',
data: {
id: ''
}
})
}
// 获取图书信息2
getBookInfo2() {
return this.request({
url: '',
method: 'POST',
data: {
id: ''
}
})
}
}
export { BookModel }
3.调用
import {
BookModel
} from '../../models/bookModel.js'
let bookModel = new BookModel()
// 获取图书信息1
const info1 = bookModel.getBookInfo1()
const info2 = bookModel.getBookInfo2()
info1.then(res => {
// res 获取到的图书信息1的数据
})
info2.then(res => {
// res 获取到的图书信息2的数据
})
// 获取图书信息1后获取图书信息2
Promise.all([info1, info2]).then(res => {
// res[0] 图书信息1的数据
// res[1] 图书信息2的数据
})
