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

我不是女神ヾ 2024-04-17 19:11 78阅读 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 条评论，78人围观）

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

相关阅读

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

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

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

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

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

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

相关源码时代前端干货分享|new关键字底层原理-执行过程

构造对象关键字：new 众所周知，js是用new来产生对象的，那么今天我们就来说说js里new产生对象的构造原理。 //人类构造函数 function People

你的名字/ 2023年06月30日 06:45/ 0 赞/ 26 阅读

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

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

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

相关源码时代UI干货分享|Axure基础教程

主界面介绍 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

悠悠/ 2023年06月22日 07:24/ 0 赞/ 31 阅读

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

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

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

相关源码时代前端干货分享|手把手教你制作ASCII码字化效果

小伙伴们是否已经让自己的球体和立方体动起来了吗? 这一节呢, 我将会带领大家制作一个很有意思的渲染效果。不知道大家有没有听过或者是看过《黑客帝国》这部电影，主要讲的是看

我会带着你远行/ 2023年06月13日 08:57/ 0 赞/ 47 阅读

相关源码时代干货分享|计算机概论和发展

因为操作系统跟硬件有相当程度的关联，所以不了解计算机概论对于学习操作系统有一定的难度，博主只陆陆续续花了一个月的时间学习了解，并写博客。希望总结的一些东西对一些计算机原理不是很

亦凉/ 2023年06月12日 05:27/ 0 赞/ 36 阅读

相关 axios请求拦截、响应拦截，router导航守卫

axios请求拦截：可以在请求头统一添加token等 axios.interceptors.request.use( function (config)

朴灿烈づ我的快乐病毒、/ 2023年02月16日 05:56/ 0 赞/ 43 阅读

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

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

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