动态Axios的配置步骤详解
在 Vue 项目中，Axios 是一个非常流行的数据请求库，它提供了很多有用的功能，例如拦截器、超时设置、baseURL 设置等。今天，我们将详细介绍如何配置动态 Axios。
一、创建文件
我们需要在 Vue 项目的 src 目录下创建一个 util 文件夹，这个文件夹通常用来存放一些封装的函数方法。然后，在 util 文件目录下创建一个 http.js 文件，用于封装 Axios 方法。
二、设置超时时间和 baseURL
在 http.js 文件中，我们可以使用 `axios.defaults` 对象来设置超时时间和 baseURL。例如：
```
axios.defaults.timeout = 5000; // 设置超时时间
axios.defaults.baseURL = 'http://localhost:4000/api/v1/'; // 设置 baseURL
```
这里，我们设置了超时时间为 5 秒，baseURL 为 `http://localhost:4000/api/v1/`。
三、拦截器
Axios 还提供了拦截器 functionality，允许我们在发送请求之前和之后执行某些操作。例如，我们可以使用拦截器来添加 token 到请求 headers 中：
```
axios.interceptors.request.use(config => {
const token = sessionStorage.getItem("token");
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type': 'application/json'
};
if (token) {
config.headers.Authorization = "Token " + token;
}
return config;
}, err => {
return Promise.reject(err);
});
```
这里，我们使用 `axios.interceptors.request.use()` 方法来添加一个拦截器，该拦截器将在每个请求发送之前执行。在这个拦截器中，我们获取了存储在本地的 token，并将其添加到请求 headers 中。
四、响应拦截器
除了请求拦截器之外，我们还可以使用响应拦截器来处理响应数据。例如：
```
axios.interceptors.response.use(response => {
if (response.status === 401) {
router.push({
path: '/login'
});
}
return response;
}, error => {
return Promise.reject(error.response.data);
});
```
这里，我们使用 `axios.interceptors.response.use()` 方法来添加一个响应拦截器，该拦截器将在每个响应返回时执行。在这个拦截器中，我们检查响应状态码，如果状态码为 401，我们将重定向到登录页面。
五、fetch 和 post 方法
我们可以封装 fetch 和 post 方法来简化数据请求。例如：
```
export function fetch(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err);
});
});
}
export function post(url, data = {}) {
return new Promise((resolve, reject) => {
axios.post(url, data)
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err);
});
});
}
```
这里，我们封装了 fetch 和 post 方法，用于简化 GET 和 POST 请求。
通过这篇教程，我们学习了如何配置动态 Axios，包括设置超时时间、baseURL、拦截器和响应拦截器等。这些配置可以帮助我们更好地管理数据请求，并提供了更好的开发体验。
