草庐IT

实现像 axios 一样的请求拦截器

一蓑烟雨任平生_cui 2023-03-28 原文

axios 拦截器在请求或响应被 then、catch 之前进行拦截处理。

axios 的三大特性：基于 Promise、同构（可以用于浏览器和 node）、拦截器。

基于 fetch 实现拦截器。

1. 拦截器

请求和响应拦截器的使用方式相同。因此，实现一个拦截器管理器类来生成拦截器实例。拦截器管理器的主要功能是对拦截器进行维护，并提供一个方法来获取所有注册的拦截器。

class InterceptorManager {
  constructor() {
    // 保存拦截器
    this.handlers = []
  }
  use(fulfilled, rejected) {
    this.handlers.push([fulfilled, rejected])
  }
  get() {
    return this.handlers
  }
}

2. 封装 fetch

fetch 是浏览器基于 Promise 实现的另一种异步获取网络资源的方法。由于不支持插件或其他扩展，所以需要封装一个请求方法，这样就可以实现拦截器功能了。方法名为 fetchPlus，向添加两个属性，requestInterceptors 用于 responseInterceptors 注册拦截器。

// 创建基于 fetch 的方法
function fetchPlus(url, config) {
  return fetch(url, config)
}
// 设置请求拦截器
fetchPlus.requestInterceptors = new InterceptorManager()
// 设置响应拦截器
fetchPlus.responseInterceptors = new InterceptorManager()

3. 拦截请求

拦截器可能是异步的，所以不能直接遍历执行拦截器函数。对于异步函数，可以使用 Promise 链接调用。

function fetchPlus(url, config) {
  const requestInterceptors = fetchPlus.requestInterceptors.get()
  const responseInterceptors = fetchPlus.responseInterceptors.get()
  const dispatchRequest = config => fetch(url, config)
  const chain = [
    ...requestInterceptors,
    [dispatchRequest, undefined],
    ...responseInterceptors
  ]
  let promise = Promise.resolve(config)

  while (chain.length) {
    const [fulfilled, rejected] = chain.shift()

    promise = promise.then(fulfilled, rejected)
  }

  return promise
}

fetchPlus.requestInterceptors = new InterceptorManager()
fetchPlus.responseInterceptors = new InterceptorManager()

4. 测试

首先模拟 dispatchRequest，修改 fetchPlus 中的 dispatchRequest：

const dispatchRequest = config => {
  console.log('fetch start')

  return new Promise(resolve => {
    setTimeout(() => {
      console.log('request done')
      resolve({ code: 0, data: { name: 'jack' } })
    }, 500)
  })
}

设置拦截器：

// 请求拦截器
fetchPlus.requestInterceptors.use(config => {
  console.log('request interceptor 1')
  console.log(config)

  return config
})
fetchPlus.requestInterceptors.use(config => {
  console.log('请求拦截器 2')
  if (config.method === 'post') {
    config.body = JSON.stringify(config.data)
    delete config.data
    config.headers = config.headers || {}
    config.headers['content-type'] = 'application/json'
  }

  return config
})
fetchPlus.requestInterceptors.use(config => {
  console.log('request interceptor 3')

  return config
})

// 响应拦截器
fetchPlus.responseInterceptors.use(res => {
  if (!res.data) {
    console.log('error')
    throw new Error(res)
  }

  return res
})

最后用 fetchPlus 发送请求：

fetchPlus('http://examples.com', { method: 'post', data: { foo: 'bar' } })
  .then(res => {
    console.log('response->', res)
  })
  .catch(err => {
    console.log('response error->', err)
  })
拦截器axiosconfigfetchPlus

有关实现像 axios 一样的请求拦截器的更多相关文章

  1. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  2. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  3. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  4. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  5. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  6. MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

  7. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  8. ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2

    通常，数组被实现为内存块，集合被实现为HashMap，有序集合被实现为跳跃列表。在Ruby中也是如此吗？我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况 最佳答案 数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为，并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而，大多数Rubyist对数组的性能特征有一些期望，这会迫使不符合它们的实现变得默默无闻，因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复

  9. ruby - "public/protected/private"方法是如何实现的，我该如何模拟它？ - 2

    在ruby中，你可以这样做:classThingpublicdeff1puts"f1"endprivatedeff2puts"f2"endpublicdeff3puts"f3"endprivatedeff4puts"f4"endend现在f1和f3是公共(public)的，f2和f4是私有(private)的。内部发生了什么，允许您调用一个类方法，然后更改方法定义？我怎样才能实现相同的功能(表面上是创建我自己的java之类的注释)例如...classThingfundeff1puts"hey"endnotfundeff2puts"hey"endendfun和notfun将更改以下函数定

  10. ruby - HTTP 请求中的用户代理，Ruby - 2

    我是Ruby的新手。我试过查看在线文档，但没有找到任何有效的方法。我想在以下HTTP请求botget_response()和get()中包含一个用户代理。有人可以指出我正确的方向吗？#PreliminarycheckthatProggitisupcheck=Net::HTTP.get_response(URI.parse(proggit_url))ifcheck.code!="200"puts"ErrorcontactingProggit"returnend#Attempttogetthejsonresponse=Net::HTTP.get(URI.parse(proggit_url)

随机推荐