request封装可以方便我们统一管理请求函数,减少冗余代码。
const baseUrl = "xxx"; //请求根
const http = ({
url = "",
param = {},
type = 'from',
...other
} = {}) => {
wx.showLoading({ //可以不加
title: '请求中...'
})
let timeStart = Date.now();
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + url,
data: param,
header: { //两种 ,一种json 一种 from
'content-type': type == 'from' ? 'application/x-www-form-urlencoded' : 'application/json'
},
...other,
complete: res => {
wx.hideLoading(); //同上 ,可以不加
console.log(`耗时${Date.now() - timeStart}`);
if (res.statusCode >= 200 && res.statusCode < 300) {
resolve(res.data);
... //此处根据自己的业务需求自行定义
} else {
reject(res)
}
}
})
})
}
使用实例
// 1.无需传参数请求(默认get请求,header为from)
const a = () => {
return http({
url: 'xxx',
})
}
// 2.带参数请求并且为post
const b = param => {
return http({
url: 'xxx',
method: 'post'
})
}
// 3.带参数请求post,header为json
const c = param => {
return http({
url: 'xxx',
type: 'json',
method: 'post'
})
}
module.exports = {
a,
b,
c,
}
页面中使用
const api = require(xxxx); //找到我们封装的api
requestA() {
api.a().then(res=> {
console.log(res);
}) .catch(err =>{
console.log(err);
})
},
requestB() {
let data = {}
api.b(data).then(res => {}).catch(err=>{})
}
//如果页面有多个请求同时进行,可以这样写
Promise.all([
api.a,
api.b,
]).then(res =>{}).catch(err=>{})