axios封装request.js

封装 Axios 请求工具 request.js
为了简化 HTTP 请求操作并统一处理请求和响应，通常会创建一个名为 request.js 的文件来封装 Axios。此文件不仅配置了 Axios 的默认设置（如基础 URL 和超时），还实现了请求与响应拦截器的功能。
创建 request.js 文件
以下是实现上述功能的一个具体例子：
// src/utils/request.js
import axios from 'axios';

const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // API base_url
timeout: 5000 // 请求超时时长 (ms)
});

// 添加请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
const token = localStorage.getItem('token');

if(token){
// 让每个请求携带自定义 token 请根据实际情况自行修改
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
error => {
// 对请求错误做些什么
Promise.reject(error);
}
);

// 添加响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做点什么
return response.data;
},
error => {
// 对响应错误做点什么
console.log(`err${error}`); // 输出错误日志至控制台
return Promise.reject(error);
}
);

export default service;
登录后复制
这段代码展示了如何利用 Axios 进行简单的封装[^1]。它设置了全局的基础路径、超时时间和请求头中的 Token 字段，并且分别针对请求和响应进行了预处理。
对于具体的 API 接口调用，在其他业务逻辑模块中只需要简单地引入这个封装后的实例即可轻松发起各种类型的 HTTP 请求，而无需重复书写相同的配置项。