【愚公系列】《循序渐进Vue.js 3.x前端开发实践》053-Axios 实用功能介绍

🚀前言

在现代 web 应用开发中，数据的获取与处理是至关重要的环节。随着 API 的广泛应用，如何高效、便捷地进行网络请求，成为了开发者面临的一大挑战。Axios 作为一个基于 Promise 的 HTTP 客户端，因其简洁的 API 和强大的功能而受到广泛欢迎。它不仅支持浏览器和 Node.js 环境，还提供了丰富的功能，帮助开发者轻松处理各种网络请求。

本篇文章将深入探讨 Axios 的实用功能，帮助你全面了解这一强大工具的各种使用场景。我们将从 Axios 的基本用法入手，逐步介绍其在请求和响应拦截、请求取消、并发请求、响应数据转换等方面的高级功能。通过具体的代码示例和详细的解释，你将能够迅速掌握 Axios 的核心特性，并将其灵活应用于你的项目中。

在此过程中，我们还会讨论一些最佳实践，以帮助你优化网络请求的效率和用户体验，包括如何处理错误、设置请求的默认配置和管理请求的生命周期等。无论你是刚刚接触 Axios 的开发者，还是希望深入挖掘其潜力的经验人士，这篇文章都将为你提供实用的指导和灵感。

🚀一、Axios 实用功能介绍

🔎1.通过配置的方式进行数据请求

Axios 提供了许多快捷的请求方法，使得发起 HTTP 请求变得更加简单。在第 11.1 节中，我们编写的请求示例代码中使用的就是这些快捷方法。下面是一些常见的快捷请求方法：

GET 请求

axios.get(url[, config])

• url：请求的接口地址。
• config：可选参数，用于配置请求的额外选项。

POST 请求

axios.post(url[, data[, config]])

DELETE 请求

axios.delete(url[, config])

HEAD 请求

axios.head(url[, config])

OPTIONS 请求

axios.options(url[, config])

PUT 请求

axios.put(url[, data[, config]])

PATCH 请求

axios.patch(url[, data[, config]])

除了使用这些快捷方法之外，我们也可以通过自定义配置进行数据请求，示例代码如下：

let city = "上海";
city = encodeURI(city);
let api = `/simpleWeather/query?city=${city}&key=cffe158caf3fe63aa2959767a503xxxx`;

axios({
  method: 'get',
  url: "/myApi" + api,
}).then((response) => {
  console.log(response.data);
});

使用上述配置进行的数据请求效果与使用快捷方法一致。需要注意的是，在配置时必须设置请求的 method 方法。

🦋1.1 创建 Axios 实例

在同一个项目中，通常会使用到许多相似的请求配置。为了简化这一过程，可以创建一个新的 Axios 请求实例，示例代码如下：

// 创建 Axios 实例，统一配置 URL 前缀、超时时间和自定义的 header
const instance = axios.create({
  baseURL: '/myApi',
  timeout: 1000,
  headers: {'X-Custom-Header': 'custom'}
});

let city = "上海";
city = encodeURI(city);
let api = `/simpleWeather/query?city=${city}&key=cffe158caf3fe63aa2959767a503xxxx`;

instance.get(api).then((response) => {
  console.log(response.data);
});

🦋1.2 重设 Axios 默认配置

如果需要让某些配置作用于所有请求，可以使用 Axios 的 defaults 属性进行配置：

axios.defaults.baseURL = '/myApi';

let city = "上海";
city = encodeURI(city);
let api = `/simpleWeather/query?city=${city}&key=cffe158caf3fe63aa2959767a503xxxx`;

axios.get(api).then((response) => {
  console.log(response.data);
});

🦋1.3 配置优先级

在对请求配置进行合并时，会按照以下优先级进行选择：

1. Axios 默认配置
2. defaults 属性配置
3. 请求时的 config 参数配置

🔎2.请求的配置与响应数据结构

🦋2.1 Axios 请求配置对象

在 Axios 中，无论是使用配置的方式进行数据请求，还是使用快捷方法，都可以传递一个配置对象来对请求进行详细配置。该配置对象的参数非常丰富，如下表所示：

表 11-1 配置对象可配置的参数

🦋2.2 Axios 返回的 Promise 对象

当一个请求被发出后，Axios 会返回一个 Promise 对象。通过此 Promise 对象，可以异步地等待数据返回。Axios 返回的数据是一个包装好的对象，包含以下属性：

表 11-2 包装的属性

读者可以尝试在浏览器中打印这些数据，观察其中的信息，以便更好地理解 Axios 的工作机制。

🔎3.拦截器的使用

🦋3.1 请求拦截器

请求拦截器允许开发者在请求发起之前，对请求进行修改或者添加一些定制化的逻辑。比如，可以在请求开始时展示页面的 Loading 效果，或者记录请求的日志信息。

示例代码：请求拦截器

axios.interceptors.request.use(
  (config) => {
    // 请求开始时触发
    alert("请求将要开始");
    return config;  // 必须返回 config，否则请求无法继续
  },
  (error) => {
    // 请求出错时触发
    alert("请求出现错误");
    return Promise.reject(error);  // 返回错误，继续抛出
  }
);

axios.get(api).then((response) => {
  console.log(response.data);
});

在上面的代码中，axios.interceptors.request.use() 方法用于添加请求拦截器。拦截器的第一个函数会在请求发送前执行，第二个函数会在请求错误时执行。

请求拦截器的常见应用

• 在请求发送前，激活 Loading 效果。
• 在请求头中添加认证信息（如 Authorization）。
• 记录请求的日志。

🦋3.2 响应拦截器

响应拦截器则是在请求完成后，接收到响应之前进行拦截。开发者可以在这个阶段对响应数据进行处理，比如修改响应数据格式、处理错误等。

示例代码：响应拦截器

axios.interceptors.response.use(
  (response) => {
    // 请求成功，响应处理
    alert(`响应状态: ${response.status}`);
    return response;  // 返回响应数据
  },
  (error) => {
    // 请求失败，错误处理
    alert("请求失败");
    return Promise.reject(error);  // 返回错误，继续抛出
  }
);

在这个例子中，axios.interceptors.response.use() 方法用于添加响应拦截器。第一个函数会在接收到响应数据时执行，第二个函数会在响应失败时执行。

响应拦截器的常见应用

• 检查服务器返回的状态码，如果有错误（如 401 未授权），自动跳转到登录页面。
• 处理返回的数据格式，如统一封装响应数据，简化后续调用。
• 弹出错误提示，通知用户请求失败。

🦋3.3 移除拦截器

在某些情况下，我们可能不再需要某个拦截器，可以通过 eject 方法移除它。

示例代码：移除请求拦截器

let i = axios.interceptors.request.use(
  (config) => {
    alert("请求将要开始");
    return config;
  },
  (error) => {
    alert("请求出现错误");
    return Promise.reject(error);
  }
);

// 移除请求拦截器
axios.interceptors.request.eject(i);

这里的 eject() 方法可以用来移除某个拦截器，参数是拦截器的引用（即 i）。这样，当你不再需要请求拦截器时，可以将其删除，避免影响后续请求。

🦋3.4 小结

通过使用 axios 的拦截器，我们可以在请求发起前或响应返回后，添加一些定制化的处理逻辑，例如：

• 请求拦截器：处理请求前的 Loading 效果、设置请求头信息等。
• 响应拦截器：处理返回数据、错误处理和统一封装等。

同时，使用 eject() 方法可以在不需要时移除拦截器，灵活控制拦截行为。