uniapp 封装完整的http请求
直接复制粘贴到uniapp项目里使用
包括手动取消单个请求
包括自动检测取消重复请求
请求拦截, 响应拦截
// login.js
// import request from './request'
//
// export default {
// login () {
// try {
// return request.get ("posts", { param1: "value1" });
// } catch (error) {
// console.error ("请求错误:", error);
// }
// }
// }
// 使用的地方
// import http from '@/http/login'
//
// let abc = async function() {
// let bbb = await http.login()
// console.log (bbb)
// }
// request.js
// 基础URL,所有请求的前缀
const BASE_URL = "https://jsonplaceholder.typicode.com/";
// 请求超时时间,单位毫秒
const REQUEST_TIMEOUT = 60000;
// 用于存储待处理的请求(处理重复请求和取消请求)
let pendingRequests = {};
/**
* 获取token的方法
* 例如,从本地存储或vuex中获取
*/
function getToken() {
return uni.getStorageSync("token") || null;
}
/**
* 移除待处理的请求
* 主要用于处理重复的请求和取消请求
* @param {Object} config - 请求配置
*/
// 如发起了一个GET请求
// request.get("/api/data");
// 随后决定取消这个请求
// removePendingRequest({ method: "GET", url: "/api/data" });
function removePendingRequest(config) {
const requestIdentifier = `${config.method}${config.url}`;
if (pendingRequests[requestIdentifier]) {
const { task } = pendingRequests[requestIdentifier];
task.abort(); // 使用 requestTask 的 abort 方法来取消请求
delete pendingRequests[requestIdentifier];
}
}
/**
* 全局请求拦截器
* 可以用于修改请求配置,如添加请求头等
* @param {Object} config - 请求配置
* @return {Object} - 返回修改后的请求配置
*/
function requestInterceptor(config) {
config.header.Authorization = "Bearer " + getToken();
return config;
}
/**
* 全局响应拦截器
* 可以用于处理特定的响应,如根据状态码进行重定向等
* @param {Object} response - 响应对象
* @return {Object} - 返回处理后的响应对象
*/
function responseInterceptor(response) {
if (response.statusCode === 401) {
// 如果响应状态码为 401,表示未授权,可以在这里处理登录逻辑
}
return response;
}
export default {
/**
* 封装的网络请求方法
* @param {Object} options - 请求选项
* @return {Promise} - 返回一个Promise对象
*/
request(options) {
return new Promise((resolve, reject) => {
const finalOptions = {
...options,
url: BASE_URL + options.url,
timeout: REQUEST_TIMEOUT,
header: {
"Content-Type": "application/json",
...options.header
}
};
// 使用请求拦截器
const interceptedOptions = requestInterceptor(finalOptions);
// 取消重复的请求
removePendingRequest(interceptedOptions);
const requestTask = uni.request({
...interceptedOptions,
success: (response) => {
// 使用响应拦截器
const interceptedResponse = responseInterceptor(response);
if (interceptedResponse.statusCode >= 200 && interceptedResponse.statusCode < 300) {
resolve(interceptedResponse.data);
} else {
reject(interceptedResponse);
}
},
fail: (error) => {
if (error.errMsg !== 'request:fail abort') {
reject(error);
}
},
complete: () => {
removePendingRequest(interceptedOptions);
}
});
// 存储此次请求任务,以供后续处理
const requestIdentifier = `${interceptedOptions.method}${interceptedOptions.url}`;
pendingRequests[requestIdentifier] = {
cancel: reject,
task: requestTask
};
});
},
/**
* 封装的GET请求方法
* @param {string} url - 请求的URL
* @param {Object} params - 请求参数
* @param {Object} options - 其他选项
* @return {Promise} - 返回一个Promise对象
*/
get(url, params = {}, options = {}) {
return this.request({
method: "GET",
url,
data: params,
...options
});
},
/**
* 封装的POST请求方法
* @param {string} url - 请求的URL
* @param {Object} data - 请求数据
* @param {Object} options - 其他选项
* @return {Promise} - 返回一个Promise对象
*/
post(url, data, options = {}) {
return this.request({
method: "POST",
url,
data,
...options
});
}
// 调用方法
/* login () {
try {
return request.get ("posts", { param1: "value1" });
} catch (error) {
console.error ("请求错误:", error);
}
}*/
};