axios全局路由拦截的设置方法

这篇具有很好参考价值的文章主要介绍了axios全局路由拦截的设置方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一个项目中如果http请求发生了错误/异常,比如返回码4xx(表示没有授权,登录过期等),我们希望能够在axios在第一时间就能拦截获取到,然后直接提示报错的错误信息,而不是在发起请求的地方,单独去做判断,这样效率太低。

所以这个时候,axios全局路由拦截就登场了:

axios全局路由代码通常是在构建axios实例注入的,下面就是代码模板:

const instance = axios.create({}) 

instance.interceptors.response.use(

// 回调函数1: 入参是请求成功时的返回结果:response

  (response) => {    

     // 请求正常时的代码块

    return response

  },

// 回调函数2: 入参是请求失败时的返回错误: error

  (error ) => {

      // 请求发生错误时的代码块。

  }

);

下面是一个应用实例中的代码:

import axios  from "axios";

import { message } from "antd"

import { useNavigate } from "react-router-dom";

const baseURL = "xxxxx"

// 创建axios实例

const instance = axios.create({

  baseURL,

  headers: {

    "Authorization": "xxxxxxxxx",   

  },

});

const navigate = useNavigate();

// 设置axios全局路由拦截

instance.interceptors.response.use(

  (response) => {    

    return response;

  },

  (error ) => {

    if (!error.response) {

      message.error("网络异常", 3);

    } else if ( error.response.status != 200) {

      console.log(error.response);

      error.response.data.err? message.error(error.response.data.err,3): null;   

      navigate("/signin");

       }

   

     }

  }

);

 总结:axios全局路由拦截的设置方法分为两步:

1.  通过 axios.create方法创建axios实例

2.  通过axios实例的interceptors.response.use方法创建拦截规则,这个方面里面有两个回调函数

      a. 回调函数1: 入参是请求成功时的返回结果:response

      b. 回调函数2: 入参是请求失败时的返回错误: error文章来源地址https://www.toymoban.com/news/detail-731662.html

到了这里,关于axios全局路由拦截的设置方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 整体认识和路由配置、基础数据渲染、热榜区域实现、图片预览组件封装、认识SKU组件、通用组件统一注册全局(详情页)【Vue3】

    整体业务认识 路由配置 准备组件模板 配置路由 绑定模板测试跳转 封装接口 获取数据渲染模版 思考:渲染模版时遇到对象的多层属性访问可能出现什么问题? 模块实现整体分析 结论:两块热榜相比, 结构一致,标题title和列表内容不同 渲染基础热榜数据 1- 准备模版 2- 封

    2024年02月15日
    浏览(46)
  • 全局ip代理安全吗? 手机设置全局代理方法详解

    全局IP代理并不一定是安全的,因为全局IP代理会将所有网络流量都通过代理服务器进行转发,包括敏感信息和隐私数据。如果代理服务器受到黑客攻击或存在安全漏洞,可能会导致数据泄露和其他安全问题。因此,在使用全局IP代理时,需要选择可信赖的代理服务器,并确保

    2024年02月15日
    浏览(47)
  • axios请求超时,设置重新请求的完美解决方法

    自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。 具体原因 最近公司在做一个项目, 服务端数据接口用的是Php输出的API, 有时候在调用的过程中会失败, 在谷歌浏

    2024年02月20日
    浏览(40)
  • 关于axios的两种拦截方式:请求拦截和响应拦截

    提示:这里可以添加本文要记录的大概内容: 提示:以下是本篇文章正文内容,下面案例可供参考 axios.interceptors.request.use() 请求拦截 axios.interceptors.request.use( function ( config ) { return config }) 这个方法的参数是一个函数,发送请求之前就会执行这个函数,函数里面的参数就是执

    2024年01月24日
    浏览(39)
  • 统一异常拦截和非法sql拦截

    目录 统一异常拦截 异常拦截的原因: 实现原理: 核心代码: aop切面实现操作记录(操作留痕) 业务场景: 实现原理: 核心代码: 非法sql拦截 业务场景: 实现原理: 核心代码: 1,对于前端用户比较友好。通过统一异常拦截我们可以将后端的异常(没有try,catch住的)给

    2024年02月05日
    浏览(43)
  • Vue3的axios请求封装,请求拦截,相应拦截

    对于三者放在Service.js中封装,方便使用 axios.create  的作用是创建一个新的  axios  实例,该实例可以具有自定义配置。通过使用  axios.create ,您可以为任何 API 生成一个客户端,并在使用同一客户端的任何调用中重复使用相同的配置。这使得在应用程序中使用多个 API 时更加

    2024年02月03日
    浏览(43)
  • axios拦截器

    一般在项目中,发送http请求时会对请求和响应进行一些特定的处理:判断token,设置请求头等,如果要挨个对每个请求都做处理的话太麻烦,方便起见,axios提供了拦截器。 axios拦截器分为请求拦截器和响应拦截器: 请求拦截器 响应拦截器 也可以移除拦截器 可以自定义axi

    2024年02月11日
    浏览(43)
  • Vue axios 拦截器

    正常情况下打开浏览器前端页面向后端发起请求使用的是axios,无论是原生的axios还是自己封装的axios都看成是axios。发起请求之后后端去数据库里面拿数据,然后返回给前端。 发起请求的地方是axios,并且你能够封装这个axios,那么你就可以添加拦截器。 请求拦截器就是你在

    2024年02月04日
    浏览(37)
  • axios 请求和响应拦截器

    1. 创建实例 使用 axios.create() 使用自定义配置创建一个 axios 实例。 2. 拦截器 在请求或响应被 then 或者 catch 处理前拦截他们,拦截分为请求拦截和响应拦截。 2.1 request 拦截器,全局添加市场信息 removeMarketCode 是否移除市场信息,默认不移除; 根据上述代码可以看到,市场信

    2024年02月09日
    浏览(39)
  • axios 中使用请求响应拦截器

    axios 简介: Axios 是一个 基于 promise 网络请求库 ,作用于 node.js 和浏览器 中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在 服务端它使用原生 node.js http 模块 , 而在 客户端 (浏览端) 则使用 XMLHttpRequests 。 axios的特性: 从浏览器创建 XMLHttpRequests 从 node.js 创

    2024年02月16日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包