当前位置：首页 > article >正文

Axios 拦截器实现的原理

article 2025/2/9 7:52:00

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

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

1. 拦截器的概念

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

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

2. 拦截器的实现原理

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

2.1 请求拦截器

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

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

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

2.2 响应拦截器

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

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

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

2.3 拦截器的链式调用

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

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);
  });