让你的 Vue3 项目告别 Axios 的杂乱，尽享优雅集成！

Vue3 中 Axios 的 魅力之旅

邂逅：Vue3 的敏捷与 Axios 的轻便

Vue3 以其出色的敏捷性和强劲的性能席卷开发界，而 Axios 则凭借其轻便、易用和强大的特性俘获了众多开发者的芳心。当这两颗明星相遇，势必会碰撞出耀眼的火花。

携手：集成 Axios 的旅程

踏上集成的第一步，我们需要将 Axios 引入 Vue3 项目。可以通过 npm 或 yarn 包管理工具轻松安装：

npm install axios

或

yarn add axios

有了 Axios 库，就可以创建自己的 Axios 实例。通常情况下，我们需要一个全局实例，以便在项目中随处使用。可以在 main.js 文件中用以下代码创建：

import axios from 'axios'

const instance = axios.create({
  // 这里可以配置一些全局的配置项
})

export default instance

别忘了在 main.js 文件中引入刚才创建的 Axios 实例：

import instance from './path/to/axios.js'

Vue.prototype.$axios = instance

现在，你可以在组件中，随心所欲地使用 $axios 来发送 HTTP 请求了。

拦截器：请求的守护神

Axios 的拦截器就像一座坚固的城墙，能够在请求发出前或响应返回后，对它们进行拦截，为项目添加一层守护。你可以用拦截器来处理诸如错误处理、加载状态、日志记录等常见任务。

实战：让 Axios 在 Vue3 中大放异彩

优雅地处理请求失败

HTTP 请求难免会遭遇失败，如何优雅地处理这些失败，是衡量一个项目是否成熟的重要指标。借助 Axios 的拦截器，你可以轻松实现请求失败时的自动重试、错误日志记录等功能。

安抚用户：Loading 状态

用户在等待 HTTP 请求返回时，难免会有些焦躁。你可以通过在请求发出前，显示一个 Loading 状态，来安抚用户的绪，让他们知道，一切正在进行中。在请求返回后，记得要关闭 Loading 状态，还给用户一个清爽的界面。

洞察错误：日志记录

错误是软件开发的一部分，但如果你不知道错误的存在，又如何能及时地修复它呢？Axios 的拦截器可以帮你记录下所有的错误日志，以便你在需要的时候，轻松地找到问题的根源。

携手共创非凡项目

Vue3 和 Axios 的强强联合，为开发者们打开了一扇通往优雅项目的的大门。如果你还没有尝试过这个组合，那么现在正是时候。希望本文为你提供了一份实用的指南，助你在开发道路上披荆斩棘，一路凯歌！

常见问题解答

1. 如何在 Vue3 中使用 Axios 发起 GET 请求？

this.$axios.get('/api/users').then((res) => {
  console.log(res.data)
})

2. 如何在 Vue3 中使用 Axios 发起 POST 请求？

this.$axios.post('/api/users', { name: 'John Doe' }).then((res) => {
  console.log(res.data)
})

3. 如何在 Axios 中使用拦截器处理错误？

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  // 处理错误
  return Promise.reject(error);
});

4. 如何在 Axios 中设置超时时间？

const instance = axios.create({
  timeout: 10000, // 设置超时时间为 10 秒
});

5. 如何在 Axios 中使用取消令牌？

const source = axios.CancelToken.source();

axios.get('/api/users', {
  cancelToken: source.token,
}).then((res) => {
  console.log(res.data)
}).catch((error) => {
  if (axios.isCancel(error)) {
    // 请求已被取消
  } else {
    // 处理其他错误
  }
});

// 取消请求
source.cancel('操作已取消');