## 用ES6Promise对象对wx.request进行封装
描述:wx.request是微信小程序提供的Api请求方法,success是请求成功的回调,fail是请求失败的回调,
我们用es6的Promise对象对该方法进行封装。
好处:方便我们对请求的异步处理,减少了我们的业务代码。
### 1.封装底层代码
~~~
//wx.request请求数据
requestData(method, url, data, header) {
if (!url || !method) return;
return new Promise((resolve, reject) => {
wx.request({
url: url,
data: data || {},
header: header || {},
method: method.toLocaleUpperCase(),
success: function (res) {
resolve(res);
},
fail: function (res) {
reject(res.errMsg || '发送网络错误(http fail)');
}
});
});
}
~~~
### 2.将我们小程序所有api请求进行模块化编程,创建一个api.js,定义一个Api类进行2次封装
~~~
class Api {
constructor() {
//此处写一些默认取值,例如拿storage里面的数据
//例如wx.getStorageSync("...");
}
//调用示例
getMyTestData(code) {
let self = this;
//定义api请求地址
let url = '';
let postData = {
//向api发送的数据
};
//调用上面封装好的wx.request请求,返回了一个Promise对象
return self.requestData('post', url, postData);
}
}
//我们将定义的Api类导入出去,然后我们小程序内其它js可以引入该js调用了
module.exports = {
Api: Api
}
~~~
### 3.具体业务js的调用方式
~~~
//导入我们定义的Api类
import { Api } from '../../utils/api.js'; //具体路径根据自己项目结构来,填写相对路径
//定义一个变量得到Api类的实例,然后我们就可以通过api这个对象去请求数据了
const api = new Api();
//具体调用
Test() {
let self = this;
//此处调用Api类里面定义的具体业务请求方法
let xxxPromise = api.getMyTestData(//此处传入具体参数).then( res => {
console.log("请求成功返回结果:", res);
//执行你的业务逻辑代码
//
//
}).catch( res => {
console.error("请求失败返回结果:", res);
});
//此处我需要等待上述请求执行成功后才能做其他处理的话就这样写
xxxPromise.then(() =>{
//会等上面请求执行完再执行
//
//
});
}
~~~