《axios的完整封装》

在开发基于Vue.js或React等前端框架的应用时，我们经常需要与后端API进行交互。axios是一个非常流行的HTTP客户端库，它允许我们以一种简单而优雅的方式发起HTTP请求。在实际项目中直接使用axios可能会遇到一些问题，例如：请求和响应的配置、错误处理、全局配置管理等。为了提高代码的可维护性和复用性，我们可以对axios进行封装。

解决方案

通过创建一个自定义的axios实例，并添加必要的中间件（如请求和响应），我们可以实现统一的错误处理、自动携带token等功能。我们还可以为不同的API模块提供特定的配置选项，确保代码更加整洁和易于维护。

一、创建基础实例

我们需要安装axios：
bash
npm install axios


然后创建一个名为api.js的文件来初始化axios实例：

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

<p>// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE<em>APP</em>BASE_API, // 根据环境变量设置baseURL
  timeout: 5000 // 请求超时时间
});</p>

<p>export default service;

二、添加请求

接下来，我们可以添加请求来处理每次请求前的操作，比如添加身份验证令牌（token）：

javascript
// 添加请求
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);


三、添加响应

同样地，我们也可以添加响应来处理服务器返回的数据：

javascript
// 添加响应
service.interceptors.response.use(
  response => {
    const res = response.data;</p>

<pre><code>// 如果是成功的响应，则直接返回数据
if (res.code === 200 || res.code === 201) {
  return res.data;
} else {
  // 处理非2xx的状态码
  Message({
    message: res.message || 'Error',
    type: 'error',
    duration: 5 * 1000
  });
  return Promise.reject(new Error(res.message || 'Error'));
}

},
error => {
console.log('err' + error); // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
});
return Promise.reject(error);
}
);

四、其他思路

除了上述基本的封装方法外，我们还可以考虑以下几种方式来进一步优化axios的使用：

• 模块化分组：对于大型项目，可以按照功能将API接口划分为不同的模块，每个模块都有自己的axios实例或者配置。
• 参数序列化：有些情况下，我们需要对请求参数进行序列化处理，特别是当涉及到复杂的对象结构时。可以使用qs库来实现这一点。
• 取消请求：当用户快速切换页面或者其他操作导致某些请求不再需要时，可以通过axios提供的取消请求功能来避免不必要的网络流量浪费。
• 加载状态管理：可以在发起请求时显示全局加载动画，在请求完成后再隐藏，给用户提供更好的体验。

通过对axios进行合理封装，不仅可以简化API调用过程中的重复代码，还能增强应用的安全性和稳定性。根据项目的具体需求选择合适的封装策略，能够使我们的前端开发工作更加高效便捷。