原生微信小程序中进行 API 请求

当在原生微信小程序中进行 API 请求时，封装请求可以提高代码的可维护性和可扩展性。在本篇博客中，我们将一步步介绍如何进一步封装请求，并添加请求超时、拦截器和请求取消功能。

在这里插入图片描述

第一步：基本请求封装

首先，我们创建一个用于发送 HTTP 请求的基本封装。在微信小程序中，我们使用 wx.request 发送请求，这里我们将它封装成一个 Promise 风格的函数：

// request.jsfunction request(url, method, data, header = {}) {return new Promise((resolve, reject) => {wx.request({url: url,method: method,data: data,header: {'content-type': 'application/json', // 根据需求设置请求头...header,},success: (res) => {if (res.statusCode === 200) {resolve(res.data);} else {reject(new Error('请求失败'));}},fail: (err) => {reject(err);},});});
}export function get(url, data = {}, header = {}) {return request(url, 'GET', data, header);
}export function post(url, data = {}, header = {}) {return request(url, 'POST', data, header);
}

这段代码中，我们定义了两个函数 get 和 post，分别用于发送 GET 和 POST 请求，并返回一个 Promise，以便在请求成功或失败时进行处理。

第二步：请求超时

为了实现请求超时功能，我们可以使用 Promise 的 Promise.race 方法。我们创建一个新的 Promise，设置一个超时时间，然后将它与实际请求的 Promise 进行竞争。如果超时时间内请求未完成，我们可以取消请求并抛出一个超时错误。

// request.jsfunction requestWithTimeout(url, method, data, header = {}, timeout = 5000) {return new Promise((resolve, reject) => {const timer = setTimeout(() => {reject(new Error('请求超时'));}, timeout);wx.request({url: url,method: method,data: data,header: {'content-type': 'application/json', // 根据需求设置请求头...header,},success: (res) => {clearTimeout(timer);if (res.statusCode === 200) {resolve(res.data);} else {reject(new Error('请求失败'));}},fail: (err) => {clearTimeout(timer);reject(err);},});});
}export function getWithTimeout(url, data = {}, header = {}, timeout = 5000) {return requestWithTimeout(url, 'GET', data, header, timeout);
}export function postWithTimeout(url, data = {}, header = {}, timeout = 5000) {return requestWithTimeout(url, 'POST', data, header, timeout);
}

第三步：请求拦截器和响应拦截器

拦截器允许我们在请求发出前和响应返回后进行一些自定义操作，例如添加请求头、记录日志或处理错误信息。我们可以通过使用函数链来实现这一功能。首先，我们创建两个空数组 requestInterceptors 和 responseInterceptors，用于存储拦截器函数。然后，我们通过一个函数来添加拦截器，每个拦截器都是一个函数，接受 config（请求配置）或 response（响应对象）作为参数，并可以对它们进行修改。最后，在请求或响应时，我们通过遍历这些拦截器数组，依次执行它们。

// request.jslet requestInterceptors = [];
let responseInterceptors = [];// 添加请求拦截器
export function addRequestInterceptor(interceptor) {requestInterceptors.push(interceptor);
}// 添加响应拦截器
export function addResponseInterceptor(interceptor) {responseInterceptors.push(interceptor);
}function executeInterceptors(interceptors, data) {return interceptors.reduce((prevData, interceptor) => {return interceptor(prevData);}, data);
}function request(url, method, data, header = {}, timeout = 5000) {// ...// 执行请求拦截器config = executeInterceptors(requestInterceptors, config);// ...// 执行响应拦截器responseData = executeInterceptors(responseInterceptors, responseData);// ...
}// ...

你可以使用 addRequestInterceptor 和 addResponseInterceptor 函数来添加自定义的拦截器，例如：

import { addRequestInterceptor, addResponseInterceptor } from './request';// 添加请求拦截器
addRequestInterceptor((config) => {// 在请求发出前进行一些操作，例如添加请求头config.header['Authorization'] = 'Bearer ' + getToken();return config;
});// 添加响应拦截器
addResponseInterceptor((response) => {// 在响应返回后进行一些操作，例如处理错误信息if (response.statusCode !== 200) {throw new Error('请求失败');}return response.data;
});

第四步：请求取消

为了实现请求取消功能，我们可以使用 Axios 风格的取消令牌（CancelToken）。我们需要创建一个 CancelToken 对象，并将它包含在请求的配置中。然后，在需要取消请求的地方，我们可以调用 cancel 方法取消请求。

// request.jslet cancelToken = new wx.miniProgram.CancelToken();function requestWithCancel(url, method, data, header = {}, timeout = 5000) {return new Promise((resolve, reject) => {wx.request({url: url,method: method,data: data,header: {'content-type': 'application/json', // 根据需求设置请求头...header,},cancelToken: cancelToken.token, // 设置取消令牌success: (res) => {if (res.statusCode === 200) {resolve(res.data);} else {reject(new Error('请求失败'));}},fail: (err) => {reject(err);},});});
}// 取消请求
export function cancelRequest() {cancelToken.cancel('请求取消');
}
进一步封装请求超时、拦截器和请求取消功能可以提高代码的灵活性和可维护性。以下是一个更完整的原生微信小程序 API 请求封装，包括这些功能：javascript
Copy code
// api.js// 创建一个取消请求的 CancelToken
const CancelToken = wx.miniProgram.CancelToken;// 默认配置
const defaultConfig = {baseURL: '', // 请求基础 URLtimeout: 5000, // 请求超时时间（毫秒）
};// 请求拦截器
function requestInterceptor(config) {// 在请求发送之前可以进行一些操作，例如添加请求头config.header = {'content-type': 'application/json',...config.header,};return config;
}// 响应拦截器
function responseInterceptor(response) {// 在收到响应后可以进行一些操作，例如处理错误信息if (response.statusCode !== 200) {throw new Error('请求失败');}return response.data;
}// 创建请求实例
const instance = wx.request.create({timeout: defaultConfig.timeout,header: {'content-type': 'application/json',},
});// 发送请求的函数
function sendRequest(config) {const { baseURL, timeout, ...restConfig } = { ...defaultConfig, ...config };const { url, method, data, params, cancelToken, ...otherConfig } = restConfig;// 合并请求 URLconst fullURL = `${baseURL}${url}`;// 创建 CancelToken 实例const source = CancelToken.source();// 设置取消令牌otherConfig.cancelToken = source.token;// 发送请求return instance({url: fullURL,method,data,params,...otherConfig,}).then(responseInterceptor).catch((error) => {if (wx.miniProgram.isCancel(error)) {// 请求被取消console.log('请求已取消');} else {// 请求发生错误console.error('请求失败：', error);}throw error;});
}export { sendRequest, requestInterceptor, responseInterceptor };

在上面的代码中，添加了以下功能：

请求超时：可以通过设置 timeout 来指定请求超时时间，如果请求在规定时间内未完成，将会被取消。
请求拦截器和响应拦截器：可以在发送请求前和处理响应后进行一些自定义操作，例如添加请求头或处理错误信息。
请求取消：我们使用 Axios 的取消令牌（CancelToken）来支持请求取消功能。可以在请求配置中设置 cancelToken，然后在需要取消请求的地方调用 source.cancel()。
使用这个进一步封装的请求函数 sendRequest，你可以在项目中更加灵活地处理网络请求，同时在拦截器中进行自定义操作，以满足不同场景的需求。在小程序的页面中，导入 sendRequest 并使用它来发起请求即可。

以上就是原生微信小程序中进行 API 请求时感谢大家的阅读
如碰到其他的问题可以私下我一起探讨学习
如果对你有所帮助还请点赞收藏谢谢~！
关注收藏博客作者会持续更新…