Vue2 封装 Axios

什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 请求客户端，可以在浏览器和 Node.js 环境中使用。它支持请求和响应拦截器，可以轻松地与 Vue.js 结合使用。

为什么需要封装 Axios？

在实际项目中，我们经常会遇到需要发送多个请求、统一处理错误等情况。为了简化代码，提高开发效率，我们可以封装 Axios，将公共逻辑抽离出来，减少重复代码。

封装 Axios

下面是一个简单的封装 Axios 的示例：

// api.js
import axios from 'axios'

const instance = axios.create({
  baseURL: '
})

instance.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

instance.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response.data
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error)
})

export default instance

在这个示例中，我们首先创建了一个 Axios 实例，然后使用 interceptors 添加了请求和响应拦截器，分别对请求和响应进行处理。

序列图

下面是一个发送 GET 请求并处理响应的序列图：

sequenceDiagram
    participant Vue
    participant Axios
    participant API
    
    Vue ->> Axios: 发送 GET 请求
    Axios ->> API: 发送 GET 请求
    API -->> Axios: 返回响应数据
    Axios -->> Vue: 返回响应数据

流程图

下面是封装 Axios 的流程图：

flowchart TD
    A(开始)
    B[创建 Axios 实例]
    C[添加请求拦截器]
    D[添加响应拦截器]
    E(结束)
    A --> B
    B --> C
    C --> D
    D --> E

总结

通过封装 Axios，我们可以在项目中统一处理请求和响应，提高代码复用性和可维护性。同时，使用 Axios 可以简化 HTTP 请求的处理过程，让我们更专注于业务逻辑的实现。希望本文对你有所帮助，谢谢阅读！