企业级Vue项目封装axios网络请求、包含了超时时间,失败后重试和接口错误提示
企业级Vue项目封装axios网络请求的示例代码,其中包含了超时时间,失败后重试和接口错误提示等完整功能,业务错误提示和系统错误提示可以根据自己的需求进行修改。
·
以下是封装axios网络请求的示例代码:
- 安装axios和element-ui
npm install axios
npm install element-ui
- 创建封装的axios实例requests.js
import axios from "axios";
import { Message } from "element-ui";
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
});
// request拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
return config;
},
error => {
// 对请求错误做些什么
Promise.reject(error);
}
);
// response拦截器
service.interceptors.response.use(
response => {
// 对响应数据做些什么
const res = response.data;
if (res.code !== 200) {
Message({
message: res.message,
type: "error",
duration: 5 * 1000
});
return Promise.reject("error");
} else {
return response.data;
}
},
error => {
// 对响应错误做些什么
Message({
message: error.message,
type: "error",
duration: 5 * 1000
});
return Promise.reject(error);
}
);
export default service;
- 带有超时时间和重试机制的网络请求
import axios from "./requests";
const TIMEOUT = 5000; // 超时时间
const RETRY_TIME = 3; // 重试次数
// 执行请求的方法
function request(config, retry = 0) {
const { timeout = TIMEOUT } = config;
return axios({
...config,
timeout
})
.then(res => {
return Promise.resolve(res);
})
.catch(error => {
if (retry >= RETRY_TIME) {
// 重试次数超过了限制
return Promise.reject(error);
}
retry++;
// 使用 Promise.reject 手动抛出异常,让 Promise.all 并发请求的方法中的 catch 捕获该异常,从而实现重试机制
return Promise.reject(error);
});
}
// 封装 get 请求方法
export function get(url, params = {}) {
return request({
url,
params,
method: "get"
});
}
// 封装 post 请求方法
export function post(url, data = {}) {
return request({
url,
data,
method: "post"
});
}
// 封装 put 请求方法
export function put(url, data = {}) {
return request({
url,
data,
method: "put"
});
}
// 封装 delete 请求方法
export function del(url, params = {}) {
return request({
url,
params,
method: "delete"
});
}
- 错误提示和接口错误处理
import { Message } from "element-ui";
// 业务错误提示
function businessError(res) {
Message({
message: res.message,
type: "warning"
});
}
// 系统错误提示
function systemError(error) {
Message({
message: error.message,
type: "error"
});
}
export { businessError, systemError };
以上是企业级Vue项目封装axios网络请求的示例代码,其中包含了超时时间,失败后重试和接口错误提示等完整功能,业务错误提示和系统错误提示可以根据自己的需求进行修改。以下是封装axios网络请求的示例代码:
更多推荐
已为社区贡献5条内容
所有评论(0)