腾讯网站建设的基本情况,怎么做外贸企业网站,网站开发技术书籍,榆林网站建设公司原生微信小程序中进行 API 请求 当在原生微信小程序中进行 API 请求时#xff0c;封装请求可以提高代码的可维护性和可扩展性。在本篇博客中#xff0c;我们将一步步介绍如何进一步封装请求#xff0c;并添加请求超时、拦截器和请求取消功能。 第一步#xff1a;基本请求封…原生微信小程序中进行 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 请求时感谢大家的阅读 如碰到其他的问题 可以私下我 一起探讨学习 如果对你有所帮助还请 点赞 收藏谢谢~ 关注收藏博客 作者会持续更新…
