Vue 项目中 Axios 的封装方向探索

什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境中发送 HTTP 请求。它的主要作用是帮助前端与后端进行数据交换，通常用于向后端接口发送 GET、POST、PUT、DELETE 等请求并处理返回的响应。

Axios 的特点：

基于 Promise，支持异步编程。
支持请求和响应的拦截器，可以进行统一的请求处理和响应处理。
支持请求取消，防止不必要的请求干扰。
支持请求并发，可以同时发起多个请求并处理响应。

为什么要封装 Axios？

在实际项目中，我们通常会封装 Axios，因为：

代码复用：避免在每个请求中都写重复的配置，比如 baseURL、请求头等配置。
统一处理：可以集中管理请求的错误处理、权限校验、Token 过期等业务逻辑。
请求拦截和响应拦截：可以统一处理请求和响应，比如设置请求头、加载动画、处理错误等。
性能优化：可以在封装中使用请求合并（比如 axios.all）等手段，提高性能。
统一错误处理：集中处理接口请求时的错误，如网络错误、状态码错误等。

如何封装 Axios？

封装 Axios 的一般流程如下：

创建 axios 实例：通过 axios.create() 创建一个实例，可以设置全局默认配置。
请求拦截器：处理请求发出之前的操作，如添加 Authorization 等请求头。
响应拦截器：处理响应返回后的操作，如统一处理错误、返回数据的处理等。
封装请求方法：封装 get、post、put 等常用请求方法。

实际项目示例

假设我们在一个 Vue 项目中需要封装 Axios 来处理请求，我们可以按以下步骤进行封装。

1. 安装 Axios

npm install axios

2. 创建 Axios 配置文件

在 src 目录下创建一个 services 目录，里面放 http.js 文件用于封装 Axios。

// src/services/http.js
import axios from 'axios';

// 创建 Axios 实例
const service = axios.create({
   
  baseURL: process.env.VUE_APP_API_BASE_URL,  // API 基础 URL
  timeout: 10000,  // 请求超时
});

// 请求拦截器
service.interceptors.request.use(
  config => {
   
    // 在请求头中加入 token（如果有的话）
    const token = localStorage.getItem

秒客网