vue axios 封装

原创

mob649e816ab022 2023-09-16 07:53:48 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e816ab022的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue Axios 封装

Axios 是一个基于 Promise 的 HTTP 客户端，用于发送 HTTP 请求，是 Vue.js 开发中常用的工具之一。在 Vue 项目中，我们经常会用到 Axios 来与后端进行数据交互。为了提高代码的复用性和可维护性，我们可以对 Axios 进行封装，以方便在不同的组件中使用。本文将介绍如何在 Vue 中封装 Axios，并给出代码示例。

基本使用

在开始封装 Axios 之前，首先需要在 Vue 项目中引入 Axios。可以通过 npm 安装 Axios，并在入口文件中引入：

// main.js
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

在组件中使用 Axios，只需要调用 this.axios 即可发送请求。例如，发送一个 GET 请求并处理返回的数据：

// MyComponent.vue
export default {
  mounted() {
    this.axios.get('/api/data')
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.error(error)
      })
  }
}

封装 Axios

为了更好地复用 Axios，并方便进行统一的错误处理和拦截处理，可以对 Axios 进行封装。可以创建一个 api.js 文件，用于封装所有的 API 请求：

// api.js
import axios from 'axios'

const api = axios.create({
  baseURL: '/api',
  timeout: 5000
})

api.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    console.error(error)
    return Promise.reject(error)
  }
)

export default api

在这个示例中，我们通过 axios.create 方法创建了一个新的 Axios 实例，并设置了默认的基本 URL 和超时时间。然后，通过 api.interceptors.response.use 方法设置了响应拦截器，用于处理请求返回的数据或错误。

接下来，在组件中使用封装的 Axios 实例，只需要调用 this.$api 即可发送请求。例如，发送一个 POST 请求并处理返回的数据：

// MyComponent.vue
export default {
  methods: {
    submitData(data) {
      this.$api.post('/data', data)
        .then(response => {
          console.log(response)
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}

序列图

下面是一个使用封装的 Axios 发送请求的序列图示例：

sequenceDiagram
  participant VueComponent as Vue 组件
  participant api as api.js
  participant Axios as Axios
  participant Backend as 后端

  VueComponent->>+api: 调用 this.$api.xxx
  api->>+Axios: 调用 axios.xxx
  Axios->>+Backend: 发送请求
  Backend-->>-Axios: 返回响应
  Axios-->>-api: 返回响应
  api-->>-VueComponent: 返回响应
  VueComponent->>-VueComponent: 处理响应数据