axios:如何拦截并响应axios请求

2024-01-10

有没有一种方法不仅可以拦截 axios 请求,还可以在发送之前对其进行响应?就像这样,从浏览器发送请求并从浏览器响应它+阻止它发送请求。

我知道我可以使用axios interceptors在请求和响应发送并返回到组件之前拦截请求和响应,我知道在请求拦截器中我可以抛出错误并用失败的请求触发响应拦截器。我该如何做同样的事情才能成功请求?给定某些条件,我希望 axios 能够响应,就像它传递到服务器一样,而实际上它从未通过拦截器。这可能吗?

这是我到目前为止所得到的伪代码:

      axios.interceptors.request.use(
      request => {
        if (localResponse) {
              throw { isLocal: true, data: { hello: 'world' } }; // <- this will stop request and trigger 
                                                                 // response error. I want to trigger 
                                                                 // the actual response callback
        } else {
            return request;   // <- will perform full request
        }
      },
      error => {
        return Promise.reject(error);
      }
    );

    axios.interceptors.response.use(
      response => {
        return response; // <- I want to trigger this callback
      },
      error => { // <- so far i can only trigger a response error
        if (error?.isLocal) { 
          return Promise.resolve(error.data); 
        }
        
        return Promise.reject(error);
      }
    );

我尝试只解决请求拦截器,但尝试继续满足请求。有人有解决这个问题的创意吗?也许有比使用拦截器更好的解决方案?


设法自己编写一个解决方案。这样我所有的 axios 调用都不必改变,我可以只改变拦截器的行为。

注意:如果有人提出更好的解决方案,我会很乐意将他们的答案标记为正确并投票。目前这是我能想到的最好的解决方案。

SOLUTION

这是我解决问题的方法

      axios.interceptors.request.use(
      request => {
        if (localResponse) {
              throw { isLocal: true, data: { hello: 'world' } }; // <- this will stop request and trigger 
                                                                 // response error. I want to trigger 
                                                                 // the actual response callback
        } else {
            return request;   // <- will perform full request
        }
      },
      error => {
        return error?.isLocal 
                    ? Promise.resolve(error); // <- triggers response intercept
                    : Promise.reject(error);
      }
    );

    axios.interceptors.response.use(
      response => {
        return response; 
      },
      error => {
          error?.isLocal 
                ? Promise.resolve(error); // <- sends as successful response
                : Promise.reject(error);
      }
    );

本质上,我所做的就是抛出错误以阻止请求通过,然后解决错误而不是拒绝它。这有点麻烦,但它可以完成工作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

axios:如何拦截并响应axios请求 的相关文章

  • 在 Google 表格脚本中设置活动单元格的值

    我想创建一个公式 在某个单元格更改上创建时间戳 下面的代码就可以了 我现在想做的是将公式转换为纯文本 将该时间戳锚定到工作表上 如果您手动执行此操作 您将选择时间戳 复制它们并将它们粘贴为值 我不想手动执行此操作 因此我创建了下面的脚本 它
  • 如何设置上传的文件名?

    By using multer I made it to request image file like this 这个文件存储在我设置的 上传 文件夹中 我的代码如下 var multer require multer var uploa
  • 从 php 到 JavaScript 的数组

    我正在尝试使用 json 将数组列表从 php 传输到 javascript 但它不起作用 JS ajax url getProfilePhotos php type post post or get method data if you
  • 我可以动态创建/销毁 Vue 组件吗?

    因此 我正在创建一个相当复杂的 Vue 应用程序 它从后端 API 获取数据并将其显示在前端 具体取决于用户选择的过滤器 它的默认设置是立即显示所有内容 然后一旦用户选择过滤器 它就会拉出不具有这些属性的 卡片 组件 直到今天 一切都很顺利
  • 如何将 Django 中的数组传递给模板并在 JavaScript 中使用它

    我想将数组传递给模板 然后通过 JavaScript 使用它 In my views py I have arry1 Str 500 20 return render to response test html array1 arry1 在
  • 我如何使用 querySelector() 选择具有双类的元素

    当我想使用 querySelector 选择元素时遇到问题 ul class xoxo blogroll ul 我怎样才能选择它ul元素 在我的代码中我像这样使用 var list document body querySelector u
  • 如何在bootstrap中默认隐藏侧边栏?

    我在这里有一个很好的参考 作为 Bootstrap 在设计 Web 表单应用程序时的侧边栏 http startbootstrap com template overviews simple sidebar http startbootst
  • Sequelize - 使用 es6 和模块运行迁移

    我不确定我是否做错了什么或者什么 我觉得我正在运行一个现代的 相当常见的堆栈 但我无法让新的 Sequelize v6 与我的设置完美配合 我在 Node v14 17 Sequelize v6 6 2 上 在我的 package json
  • 使用命名的成功/错误回调在 AngularJS 中声明一个 Promise

    我正在尝试做一些与 http 服务非常相似的事情 根据我的理解 http 返回一个 Promise 对象 使用它时 语法是 http success function data success callback error function
  • React 应用程序中的 addEventListener 不起作用

    一些背景 我正在尝试消费自定义网络组件在 React 应用程序中并尝试监听来自 Web 组件的事件 我相信您不能只在自定义 Web 组件上以通常的反应方式处理事件 i e
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • 限制 Dropzone 仅上传特定类型的文件

    我正在使用 Dropzone 上传文件 这是我的代码 div div
  • JavaScript:常量属性

    在javascript中 我可以将对象的属性声明为常量吗 这是一个示例对象 var XU Cc Components classes or function aXU this Cc Components classes var XU new
  • setInterval() 在用户离开选项卡时暂停?

    javascript 中是否有任何方法的行为类似于 setInterval 并且当用户离开选项卡时停止并在用户再次进入选项卡时恢复 您可以使用以下方法创建自己的 API可见性API https developer mozilla org e
  • 如何知道浏览器空闲时间?

    如何跟踪浏览器空闲时间 我用的是IE8 我没有使用任何会话管理 也不想在服务器端处理它 这是纯 JavaScript 方法来跟踪空闲时间 并在达到一定限制时执行一些操作 var IDLE TIMEOUT 60 seconds var idl
  • 如何使用 JavaScript 获取元素的填充值?

    我有一个textarea在我的 HTML 中 我需要获取整数或浮点形式的填充数值 以像素为单位 我如何使用 JavaScript 获取它 我没有使用 jQuery 所以我正在寻找纯 JavaScript 解决方案 这将返回padding l
  • JavaScript 提升解释

    下面的片段有什么区别 var a 0 function b a 10 return function a b console log a gt 10 and var a 0 function b a 10 return function a
  • 使用 AJAX 和 JQuery 按设定的时间间隔刷新 Rails 部分

    I have a page in my rails application that looks like 现在 我有另一个用 python 编码的人工智能应用程序 它处理视频 显示在 Rails 应用程序页面的左侧 并使用捕获的车辆及其相
  • DOM 解析器 Chrome 扩展内存泄漏

    问题 我开发了一个扩展程序 可以拦截 Web 请求 获取 Web 请求来源的 HTML 并对其进行处理 我使用 DOMParser 来解析 HTML 并且意识到 DOMParser 正在导致大量内存泄漏问题 最终导致 chrome 扩展崩溃
  • JQuery 删除和内存泄漏

    我正在开发一个游戏 我看到了很多内存消耗 我使用jquery animate 动画完成后 我 remove 元素 我的问题是 从 dom 树中删除一个元素后 对象还存在记忆中吗 Javascript 是一种垃圾收集语言 这意味着当没有代码保

随机推荐

  • 如何创建所有数字组合的n维数组?

    我想创建一个函数AllCombnations d maxValue 这将创建一个包含从 0 到 的所有数字组合的 d 维数组maxValue 例如 在 3D 空间中创建所有数字组合 从 0 到maxValue可能是这样的 for int i
  • 挽救模块内特定类型的所有错误

    我有一个模块 在其中执行项目的所有加密 解密任务 我想抓住任何OpenSSL Cipher CipherError该模块中发生的异常以便我可以处理它们 是否可以做类似的事情 rescue from OpenSSL Cipher Cipher
  • Symfony 4 Composer 脚本

    我刚刚安装了 Symfony 4 项目并在中找到了此部分composer json scripts auto scripts cache clear symfony cmd assets install PUBLIC DIR symfony
  • 如何获得没有标签的地图?

    我想要一张有路网的地图 我只需要一张图片 但没有标签 地图上的文字 我尝试从 Google API 获取这样的地图并想 element geometry works 但是 例如 依然充满文字 如何获取没有文字标签的路网图 静态图片也可以 任
  • 如何打开两个Javafx窗口?

    我正在使用 javafx 想在按钮的 setOnAction 中编写代码来关闭 javafx1 类并运行 javafx2 类 但我看到错误 应用程序启动不得被调用多次 我怎样才能解决这个问题 This code is in the clas
  • 这段 JavaScript 代码是什么意思?

    var myval function 我不明白 function 含义甚至其他代码 你所拥有的是 自调用匿名函数 您首先通过在函数本身周围添加括号来创建函数表达式 只是为了写 function 在这种情况下不起作用 因为这将定义一个函数声明
  • Magento 扩展 404 错误

    我很难过 我有一个自定义扩展 可以在 Mac Leopard 本地完美运行 但是在将实时推送到主机 Centos Linux 后 当我尝试调用前端路由器时 出现 Magento 404 错误 例如这个网址 domain shop index
  • PHP 如何获取带有类和名称空间路径的方法名称作为字符串?

    我真的很讨厌写这个问题 因为我是一种 研究人员 而且 我总是能找到我正在寻找的东西 但这一个让我很烦恼 我在任何地方都找不到答案 所以 事情是这样的 正如标题所示 我需要获取一个方法名称 其中尾随类和命名空间路径作为字符串 我的意思是这样的
  • 关于android加速度计onSensorChanged的信息

    我正在尝试在android平台上编写一个体感游戏 我将整个运动检测算法包含到 onSensorChanged 函数中 问题在于该函数根据输入执行不同的时间 我对函数如何执行和调用有一些疑问 1 如果我的函数执行很长时间 并且发生了 2 个
  • 使用 Julia 中的 Images 导出图像

    假设我有一个m by n by 3的数组Uint8它表示一个图像 其中假定使用 RGB 色彩空间 我想使用以下命令将其导出为每像素 24 位 PNG 图像Images包裹 我怎样才能做到这一点 我天真地尝试申请imwrite到随机生成的原始
  • 附加 pandas 数据框自动转换为 float 但需要 int

    如何让 pandas 附加一个整数并保留整数数据类型 我意识到我可以在输入数据后将 df test astype int 添加到整个列 但如果我可以在附加数据时执行此操作 那么这似乎是一个更好的方法 这是一个示例 from bitstrin
  • 即使包含当前脚本,也要获取当前脚本的 URL?

    我有一个 PHP 脚本 需要知道它的 URL 即使它包含在另一个脚本中 我试过了 SERVER REQUEST URI 但这不会将 URI 返回到我的脚本 而是将 URI 返回到包括脚本 我也尝试过 dirname FILE 但我似乎无法将
  • 通过 gcloud 命令行工具触发特定 git 提交的构建

    我遇到的所有示例均采用以下格式 gcloud container builds submit config cloudbuild yaml 手册页内容如下 SOURCE The source directory on local disk
  • 自定义按钮的核心图形与图像

    我什么时候应该使用核心图形而不是图像来制作自定义 UIButton 核心显卡速度更快吗 除了分辨率独立之外 还有其他主要好处吗 核心显卡的优点 绘制按钮的代码可能比图像文件小 允许动态修改 轻微更改 而无需添加完整的第二个图像 正如您提到的
  • 在 Rust 中多次使用同一个迭代器

    编者注 此代码示例来自 1 0 之前的 Rust 版本 当时实现了许多迭代器Copy 此代码的更新版本会产生不同的错误 但答案仍然包含有价值的信息 我正在尝试编写一个函数来将字符串拆分为字母和数字块 例如 test123test 会变成 t
  • Haskell 编译器如何决定是在堆上分配还是在堆栈上分配?

    Haskell 不具有显式内存管理功能 并且所有对象都是按值传递的 因此也没有明显的引用计数或垃圾收集 Haskell 编译器通常如何决定是为给定变量生成在堆栈上分配的代码还是在堆上分配的代码 它是否会在堆或堆栈上为同一函数在不同的调用站点
  • 如何使用 webmock 正则表达式匹配器?

    如何匹配 URL 例如 http www example com foo id bar http www example com foo 1 bar http www example com foo 999 bar 存根请求 帖子 www
  • 使用 onmousedown 来获取您刚刚按下鼠标的元素的 ID?

    这可能吗 我正在尝试为 onmousedown 编写一个函数 它将返回您刚刚单击的元素的 ID 以便稍后在不同的 div 中重新创建该元素时使用 您可以使用事件委托 http www sitepoint com blogs 2008 07
  • 从 TFRecordDataset 获取数据集作为 numpy 数组

    我正在使用新的tf data API为 CIFAR10 数据集创建迭代器 我正在读取两个数据 tfrecord文件 一个保存训练数据 train tfrecords 另一个保存测试数据 test tfrecords 这一切都很好 然而 在某
  • axios:如何拦截并响应axios请求

    有没有一种方法不仅可以拦截 axios 请求 还可以在发送之前对其进行响应 就像这样 从浏览器发送请求并从浏览器响应它 阻止它发送请求 我知道我可以使用axios interceptors在请求和响应发送并返回到组件之前拦截请求和响应 我知