原生微信小程序中进行 API 请求
当在原生微信小程序中进行 API 请求时，封装请求可以提高代码的可维护性和可扩展性。在本篇博客中，我们将一步步介绍如何进一步封装请求，并添加请求超时、拦截器和请求取消功能。
第一步：基本请求封装
首先，我们创建一个用于发送 HTTP 请求的基本封装。在微信小程序中，我们使用 wx.request 发送请求，这里我们将它封装成一个 Promise 风格的函数：
// request.js function 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.js function 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.js let 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.js let 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: '', // 请求基础 URL timeout: 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; // 合并请求 URL const 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 请求时感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…
