如何对 wx.request 进行二次封装来支持 promise 以及配置拦截器、接口基础路径
时间: 2024-09-09 08:13:24 浏览: 45
基于小程序请求接口wx.request封装的类axios请求
5星 · 资源好评率100%
`wx.request` 是微信小程序提供的一个用于发起网络请求的 API,它支持两种风格的回调:传统的回调函数形式和 Promise 形式。由于传统的回调方式可能会导致代码难以维护和理解,因此进行二次封装,支持 Promise 形式,并增加拦截器和接口基础路径的配置,可以提高代码的可维护性和复用性。
下面是一个简化的示例来展示如何对 `wx.request` 进行二次封装:
```javascript
// 封装wx.request为支持Promise的版本
function createRequestInstance(baseURL) {
return function (config) {
// 配置拦截器,可以在这里添加请求前和响应后的处理
const interceptors = {
request(config) {
// 可以在这里做一些请求前的操作,比如设置loading提示等
return config;
},
response(response) {
// 可以在这里做一些响应后的操作,比如隐藏loading提示等
return response;
}
};
// 合并请求配置与基础路径
const mergedConfig = Object.assign({
baseURL,
header: {
'content-type': 'application/json'
}
}, config);
// 请求前拦截处理
mergedConfig = interceptors.request(mergedConfig);
// 发起请求
return new Promise((resolve, reject) => {
wx.request({
url: mergedConfig.url,
data: mergedConfig.data,
method: mergedConfig.method,
header: mergedConfig.header,
success(res) {
// 响应后拦截处理
const response = interceptors.response(res);
resolve(response);
},
fail(err) {
reject(err);
}
});
});
}
}
// 使用封装函数
const request = createRequestInstance('https://api.example.com');
request({
url: '/user',
method: 'GET'
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
```
在这个示例中,我们定义了一个 `createRequestInstance` 函数,它接受一个基础路径 `baseURL` 作为参数,并返回一个新的函数。这个返回的函数接受一个配置对象 `config`,用于发起请求。我们还在请求前后添加了拦截器的概念,允许用户在请求发送前和接收到响应后进行一些操作。
注意,由于微信小程序的限制,使用 `new Promise` 来包装 `wx.request` 实际上并不会改变其异步特性,这仅仅是为了使接口风格与现代 JavaScript 的异步处理模式保持一致。
阅读全文