源码时代前端干货分享| Axios的请求与响应拦截步骤详解

我不是女神ヾ 2024-04-17 19:11 18阅读 0赞

## **一、使用场景** ##

Axios作为React，Vue，Angular最常使用的HTTP请求库，承担了大部分请求的发送和接收。

在项目中，开发者经常会遇到两种情景

一：在每次发送请求时，携带用户token方便后台做用户相关操作

二：服务器所有接口都会返回一个错误码，比如10001，请求参数错误。 10002，用户未授权等等，我们需要在收到响应后对错误码进行相关提示。

如果我们在每个接口都进行验证那太麻烦，代码冗余不说，后期维护成本也很高，到处找接口进行代码改动。Axios提供了非常方便的一种功能：请求/响应拦截器。我们就可以在这种场景派上用场。

*  **请求拦截器**

**场景：在每次发送请求时，携带用户token方便后台做用户相关操作**

*在每次发送请求前，都会进入请求拦截器，我们可以在此处统一绑定上想要发送的参数，则每个请求都会自动携带token*

axios.interceptors.request.use(

config => \{

//config是axios配置对象

//每次发送请求前都会进入此拦截器处理函数，可以在此处统一携带上token，每次请求都会自

config.headers.common\['token'\] = localStorage.getItem(“token”);

return config

\},

err => \{

//请求出错的处理函数

return Promise.reject(err)

\})

*  **响应拦截器**

**场景：服务器所有接口都会返回一个错误码，比如10001，请求参数错误。 10002，用户未授权等等，我们需要在收到响应后对错误码进行相关提示。**

*在每次收到响应时，都会先进入响应拦截器，在分发给各个请求函数，我们可以在此处统一先处理错误码，在进入各自的响应细节函数处理res*

axios.interceptors.response.use(function(res)\{

//收到响应后，可以先统一处理错误码

switch (res.data.code) \{

case 10001:   alert(‘非法操作’);

router.push(\{ path: '/\});

case 10002:  alert(‘权限不足’);

......

\}

return res;

\},function(err)\{

//响应出错进入的函数

return Promise.reject(err);

\});

以上就是axios拦截器的使用教程及场景，希望对大家有所帮助，不管任何项目，只要使用的是axios发送请求，则都可以使用拦截器进行统一处理，减少冗余代码，降低二次开发及维护难度。

（本文由源码时代技术老师撰写，转载请注明出处）

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关源码时代UI干货分享|简单五个步骤，教你使用AI绘制渐变星球海报！

前用ps做了很多期海报，这次给大家讲讲AI快速制作海报的方法吧，还是沿用近两年比较流行的渐变色，几分钟快速出效果，先看看效果图： ![watermark_type_Zm...

川长思鸟来/ 2024年04月20日 09:21/ 0 赞/ 32 阅读

相关源码时代前端干货分享| konva里面会用到哪些形状函数以及对应的参数

**应用教程** **--常用的形状及参数说明** 时间过得真快，相信大家对于konva已经非常熟悉了吧。那么多常用的函数及使用，大家已经能够熟练使用了吗...

红太狼/ 2024年04月20日 09:15/ 0 赞/ 28 阅读

相关源码时代前端干货分享| JavaScript编程优化，超强入门必备技能！

*一、按强类型风格定义变量** 大家要知道js是一种弱类型语言，定义变量的时候不要太随意，大多数初学者定义变量时，只是声明变量而没有赋值，这样就显得太随意了声明变量...

雨点打透心脏的1/2处/ 2024年04月18日 12:34/ 0 赞/ 39 阅读

相关源码时代前端干货分享| Axios的请求与响应拦截步骤详解

**一、使用场景** Axios作为React，Vue，Angular最常使用的HTTP请求库，承担了大部分请求的发送和接收。在项目中，开发者经常会遇到两种情景 ...

我不是女神ヾ/ 2024年04月17日 19:11/ 0 赞/ 19 阅读

相关 axios拦截器，如何批量处理请求响应

axios拦截器 axios特性 axios拦截器具体实现进一步分离封装 axios特性从浏览器创建 XMLHttpReque

素颜马尾好姑娘i/ 2024年03月23日 21:55/ 0 赞/ 39 阅读

相关源码时代前端干货分享| React中Context API的应用，菜鸟逆袭必备！！

React Context API 要理解react中的context，首先要讲一下react组件之间的通信（组件之间的数据传递）在父子组件中，如果父组件要传递数据

末蓝、/ 2023年08月17日 16:21/ 0 赞/ 52 阅读

相关源码时代Java干货分享|Jvm优化指南

Jvm简介 JVM是Java Virtual Machine（Java虚拟机）的缩写，JVM是一种用于计算设备的规范，它是一个虚构出来的计算机，是通过在实际的计算机上仿真

ゝ一世哀愁。/ 2023年06月30日 06:45/ 0 赞/ 77 阅读

相关源码时代前端干货分享|Nuxt开发使用文档

一、Nuxt概述 Nuxt官方理解是Vue的通用框架，它的作用主要是用来作SSR（服务器端渲染）。而Vue是开发SPA（单页应用）的js框架。Nuxt采用Vue开发多页

╰+哭是因爲堅強的太久メ/ 2023年06月15日 15:24/ 0 赞/ 72 阅读

相关源码时代JAVA干货分享 | 利用NIO模拟实现Tomcat容器！

NIO是什么 New IO，始于Java1.4，提供新的非阻塞 JavaIO 操作API. 又称Non-Blocking IO 非阻塞IO 替代旧版本的Blocking

今天药忘吃喽~/ 2021年10月29日 14:18/ 0 赞/ 126 阅读

相关 axios 二次封装、请求拦截、响应拦截

实际开发中，直接用axios的api方法比较麻烦，二次封装一下，要好用很多请求拦截：就是调接口之前，可以添加一些请求配置，headers token等等响应拦截：就

骑猪看日落/ 2021年09月19日 00:12/ 0 赞/ 603 阅读