Axios 拦截器实现的原理

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

💬 前些天发现了一个巨牛的人工智能学习网站 ，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

- [1. 拦截器的概念](#1. 拦截器的概念)
- [2. 拦截器的实现原理](#2. 拦截器的实现原理)
- - [2.1 请求拦截器](#2.1 请求拦截器)
  - [2.2 响应拦截器](#2.2 响应拦截器)
  - [2.3 拦截器的链式调用](#2.3 拦截器的链式调用)
- [3. 拦截器的应用场景](#3. 拦截器的应用场景)
- [4. 总结](#4. 总结)

Axios 是一个基于 Promise 的 HTTP 客户端，它提供了一种简单而强大的方式来发送 HTTP 请求。Axios 的拦截器功能是其一大亮点，它允许我们在请求发送前和响应返回后执行自定义逻辑。本文将深入探讨 Axios 拦截器实现的原理。

1. 拦截器的概念

拦截器是 Axios 中一个非常重要的功能，它可以在请求发送前和响应返回后对请求和响应进行处理。通过使用拦截器，我们可以：

在请求发送前修改请求配置。
在请求返回后对响应数据进行处理。
统一处理请求错误。

2. 拦截器的实现原理

Axios 拦截器的实现基于 JavaScript 的 Promise 链。每个拦截器都是一个函数，它接收一个参数并返回一个 Promise。当请求或响应通过拦截器时，拦截器函数会被调用，并接收请求或响应对象作为参数。

2.1 请求拦截器

请求拦截器允许我们在请求发送前对请求进行修改。以下是一个请求拦截器的示例：

javascript 复制代码

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

在这个示例中，我们定义了一个请求拦截器，它会在请求发送前对请求配置进行修改。如果请求配置没有问题，我们返回修改后的配置；如果请求配置有错误，我们返回一个被拒绝的 Promise。

2.2 响应拦截器

响应拦截器允许我们在响应返回后对响应进行处理。以下是一个响应拦截器的示例：

javascript 复制代码

axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

在这个示例中，我们定义了一个响应拦截器，它会在响应返回后对响应数据进行处理。如果响应数据没有问题，我们返回处理后的响应；如果响应数据有错误，我们返回一个被拒绝的 Promise。

2.3 拦截器的链式调用

Axios 的拦截器是链式调用的，这意味着我们可以定义多个拦截器，它们会按照定义的顺序依次执行。以下是一个链式调用的示例：

javascript 复制代码

axios.interceptors.request.use(function (config) {
    // 第一个请求拦截器
    return config;
  }, function (error) {
    return Promise.reject(error);
  });

axios.interceptors.request.use(function (config) {
    // 第二个请求拦截器
    return config;
  }, function (error) {
    return Promise.reject(error);
  });

在这个示例中，我们定义了两个请求拦截器，它们会按照定义的顺序依次执行。

3. 拦截器的应用场景

拦截器在很多场景下都非常有用。以下是一些常见的应用场景：

添加请求头：我们可以在请求拦截器中添加公共的请求头，如认证信息。
错误处理：我们可以在响应拦截器中统一处理错误响应。
日志记录：我们可以在请求和响应拦截器中记录请求和响应的日志，方便调试和监控。

4. 总结

Axios 的拦截器功能是其一大亮点，它允许我们在请求发送前和响应返回后执行自定义逻辑。通过深入理解 Axios 拦截器的实现原理，开发者可以更好地利用这一功能，满足复杂的业务需求。