前端配置axios请求

在前端开发中，当我们需要与后端API进行交互时，axios是一个非常流行且功能强大的HTTP客户端。为了使我们的项目代码更整洁、更具可维护性，并且能够集中管理所有请求的配置（如基础URL、请求头等），我们通常会单独配置axios。

解决方案

提供两种常见的解决方案来配置axios：一种是创建一个全局的axios实例并添加默认配置；另一种则是利用来处理请求和响应。这两种方式都可以帮助开发者简化请求流程，提高代码复用性和项目的可维护性。

一、创建全局axios实例

我们需要安装axios库，可以通过npm或yarn来进行安装：
bash npm install axios --save
或者
bash yarn add axios

然后，在项目的src目录下新建一个名为http.js的文件，用于存放axios配置。下面是一段简单的示例代码：

javascript
import axios from 'axios';</p>

<p>// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE<em>APP</em>BASE<em>API, // api 的 base</em>url
  timeout: 5000 // 请求超时时间
});</p>

<p>export default service;

在这个例子中，我们通过axios.create()方法创建了一个新的axios实例，并设置了baseURL和timeout作为默认参数。其中process.env.VUE_APP_BASE_API是从环境变量中获取的API地址，这有助于我们在不同环境下（如开发、测试、生产）轻松切换API服务器。

二、使用处理请求和响应

除了设置基本配置外，我们还可以为每个请求和响应添加额外的逻辑。比如，在发送请求之前添加认证信息到请求头，或者当收到错误响应时显示友好的提示信息。这可以通过axios提供的功能实现。

继续编辑http.js文件，加入以下代码：

``javascript // 请求 service.interceptors.request.use( config => { // 在发送请求之前做些什么 if (store.getters.token) { // 判断是否存在token config.headers['Authorization'] =Bearer ${store.getters.token}`; // 让每个请求携带自定义token 请根据实际情况修改
}
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);

// 响应
service.interceptors.response.use(
response => {
const res = response.data;
// 如果返回的状态码不是200，则认为是失败的
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
});
return Promise.reject(new Error(res.message || 'Error'));
} else {
return res;
}
},
error => {
console.log('err' + error); // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
});
return Promise.reject(error);
}
);
```