突破限制：Vue.js 中 Axios 的巧妙封装

前端

2023-11-12 01:46:03

背景：Axios 在 Vue.js 中的重要性

Axios 是一个轻量级的 Promise 库，可用于浏览器和 Node.js 环境，以简单的方式发送 HTTP 请求。它拥有许多优点，包括：

易于使用，API 设计简单明了
支持各种 HTTP 请求方法，包括 GET、POST、PUT、DELETE 等
支持请求和响应拦截器，可用于统一处理请求和响应
支持超时设置和取消请求
可在浏览器和 Node.js 环境中使用

正因为如此，Axios 已成为 Vue.js 项目中进行网络请求的常用选择。

封装 Axios 的必要性

尽管 Axios 很易于使用，但对于某些场景，原生的 Axios 使用起来仍有些繁琐。例如：

需要在每次请求中都携带相同的头部信息
需要在每次请求中都进行身份验证
需要对请求和响应进行统一处理

针对这些场景，对 Axios 进行封装就很有必要了。

封装 Axios 的实现

封装 Axios 的核心思路是创建一个 Axios 实例，并为这个实例添加一些默认的配置和拦截器。

import axios from 'axios'

// 创建 Axios 实例
const axiosInstance = axios.create({
  // 设置默认的请求头
  headers: {
    'Content-Type': 'application/json'
  },
  // 设置默认的超时时间
  timeout: 10000,
  // 设置默认的 baseURL
  baseURL: 'https://example.com/api'
})

// 添加请求拦截器
axiosInstance.interceptors.request.use((config) => {
  // 在请求发送之前做一些处理
  // 比如，添加 token

  return config
}, (error) => {
  // 在请求发送失败时做一些处理

  return Promise.reject(error)
})

// 添加响应拦截器
axiosInstance.interceptors.response.use((response) => {
  // 在请求成功后做一些处理
  // 比如，处理响应数据

  return response
}, (error) => {
  // 在请求失败时做一些处理

  return Promise.reject(error)
})

这样，我们就可以通过这个 Axios 实例来进行网络请求了。

// 使用 Axios 实例发送 GET 请求
axiosInstance.get('/users')
  .then((response) => {
    console.log(response.data)
  })
  .catch((error) => {
    console.log(error)
  })

封装的优点

封装 Axios 的优点有很多，包括：