Axios 请求拦截器和响应拦截器示例
import axios from 'axios';
import { getToken } from '../utils/token';
import { showMessage } from './status'; // 引入状态码文件
// import { ElMessage } from 'element-plus'; // 引入el提示框 // 可以删除
// import { Promise } from 'core-js'; // 不需要引入
// 设置接口超时时间
axios.defaults.timeout = 30000;
// 请求地址,动态赋值的环境变量
axios.defaults.baseURL = import.meta.env.VITE_APP_BASE_API;
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 30000,
headers: { 'Content-Type': 'application/x-www-form-urlencoded;' }, // 传参方式表单
// 'Content-Type': 'application/json;charset=UTF-8', // 传参方式为json
})
// 请求拦截器
service.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么,例如添加token等
config.headers = {
'Authorization': getToken('token') // 身份认证
}
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
)
// 响应拦截器
service.interceptors.response.use(
(response) => {
const { code } = response.data;
// 对响应数据做些什么
if (code === '0') {
return response.data;
} else {
// ElMessage.error('系统出错'); // 应该放在 else 语句中
return Promise.reject(new Error('Error')); // 应该放在 else 语句中
}
// 响应数据为二进制流处理(Excel导出)
// if (response.data instanceof ArrayBuffer) {
// return response;
// }
},
(error) => {
// 对响应错误做些什么
const { response } = error;
if (response) {
// 请求已发出但不在 200 的范围内
showMessage(response.status); // 传入响应码,匹配对应的响应码信息
return Promise.reject(response); // 直接返回response对象
} else {
// ElMessage.error("网络连接异常,请稍后再试!"); // 使用单引号
}
return Promise.reject(error.message);
}
)
export default service
说明:
- 引入的
axios是使用 CDN 或者 npm 包管理工具安装的,具体取决于项目环境。 element-plus库中的ElMessage组件没有使用,已删除。Promise是 ES6 中的内置对象,不需要引入。getToken和showMessage函数需要在其他文件中定义。ElMessage.error('系统出错')和return Promise.reject(new Error('Error'))应该放在if (code === '0')的else语句中。return Promise.reject(response.data)应该改为return Promise.reject(response)。- 导出的是
service,需要在其他地方使用。
注意:
- 使用单引号代替双引号,符合 JavaScript 代码规范。
import.meta.env.VITE_APP_BASE_API是使用vite开发时动态获取环境变量的方式。getToken('token')函数需要根据实际情况实现,用于获取用户身份验证的 token。showMessage函数需要根据实际情况实现,用于显示状态码信息。- 代码中注释部分可以根据实际情况修改或删除。
- 确保在项目中正确引入
axios和其他依赖库。 - 使用
service对象发送 HTTP 请求。
示例:
import service from './http';
service.get('/api/users')
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
});
原文地址: https://www.cveoy.top/t/topic/qjuD 著作权归作者所有。请勿转载和采集!