Axios 拦截器实战教程:简单易懂

Axios 提供了一种称为 "拦截器(interceptors)" 的功能,使我们能够在请求或响应被发送或处理之前对它们进行全局处理。拦截器为我们提供了一种简洁而强大的方式来转换请求和响应、进行错误处理、添加认证信息等操作。在本文中,我们将深入探讨如何使用 Axios 的拦截器,并提供一个实际案例来演示其用法。

Axios 拦截器的基本概念

在 Axios 中,拦截器是一个由两个部分组成的对象:请求拦截器(request interceptors)和响应拦截器(response interceptors)。这两种拦截器允许我们在请求发出之前和收到响应后对其进行预处理。

请求拦截器(request interceptors) 用于在请求被发送之前修改请求配置,或者在发送请求前进行一些操作,例如添加认证信息、设置请求头等。

响应拦截器(response interceptors) 用于在接收到响应数据之后进行处理,可以对响应数据进行转换、错误处理等操作。

Axios 拦截器是链式结构的,这意味着您可以同时使用多个拦截器,并且它们按照添加顺序依次执行。

下面是 Axios 中拦截器的基本用法:

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

// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    // 对响应数据做些什么
    return response;
  },
  function (error) {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

实践案例:使用 Axios 拦截器请求处理

让我们通过一个实际案例来演示 Axios 拦截器的用法。在这个案例中,我们将使用 Axios 发起一个 GET 请求,并在请求拦截器中添加一个基本的认证头,并在响应拦截器中处理返回的数据。

请求路径

为了便于测试,所以案例使用 Apifox 提供的开放 API 来测试,测试的 API 路径为:https://echo.apifox.com/get?q1=v1

案例代码

首先,确保您已经在项目中安装了 Axios:

npm install axios

现在,我们来编写实践案例代码:

// 导入 Axios 和你的 IDE 编辑器中的其他必要模块
const axios = require('axios');

// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前添加认证头
    config.headers['Authorization'] = 'Bearer your_access_token';
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    // 对响应数据进行处理
    return response.data;
  },
  function (error) {
    // 对响应错误进行处理
    return Promise.reject(error);
  }
);

// 发起 GET 请求
axios.get('https://echo.apifox.com/get?q1=v1')
  .then((data) => {
    // 处理返回的数据
    console.log('请求成功,数据为:', data);
  })
  .catch((error) => {
    // 处理错误
    console.error('请求失败,错误为:', error);
  });

在这个案例中,我们在请求拦截器中添加了一个名为 "Authorization" 的认证头,并在响应拦截器中处理了返回的数据。

提示与注意事项

  1. 当添加多个拦截器时,确保它们的顺序是正确的,因为它们会按照添加的顺序依次执行。
  2. 在拦截器中,务必返回修改后的 config 对象或响应数据,否则可能会导致请求或响应失败。
  3. 谨慎使用拦截器,不要滥用,否则可能会导致代码难以维护和理解。

总结

Axios 的拦截器是一个强大的功能,使得我们能够在请求和响应阶段对数据进行全局处理。我们在本文中介绍了请求拦截器和响应拦截器的基本概念,并通过一个实践案例演示了如何使用 Axios 拦截器来处理基本路由与请求。拦截器为我们提供了更灵活、高效的方式来管理 HTTP 请求和响应,帮助我们在前端开发中更好地处理数据交互。

使用 Apifox 来 Mock 数据

Apifox = Postman + Swagger + Mock + JMeter,Apifox 支持调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协议的接口,并且集成了 IDEA 插件。在后端人员写完服务接口时,测试阶段可以通过 Apifox 来校验接口的正确性,图形化界面极大的方便了项目的上线效率。

更为重要的是Apifox 能够 Mock 数据,其集成了 Mock.js 库,允许你自定义规则,并且可以编写脚本,强大的 Mock 功能可以让前端开发人员不再苦苦等待后端提供接口,自己就能提前造各种各样的数据出来,可视化操作让你点点鼠标就能生成可观的人性化数据。

知识扩展:

参考链接:

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
Mephisto.java5 小时前
【大数据学习 | HBASE高级】storeFile文件的合并
大数据·sql·oracle·json·hbase·database
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js