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 功能可以让前端开发人员不再苦苦等待后端提供接口,自己就能提前造各种各样的数据出来,可视化操作让你点点鼠标就能生成可观的人性化数据。

知识扩展:

参考链接:

相关推荐
Myli_ing25 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维43 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_1 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁2 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue