axios原理

文章目录

    • axios基本概念
    • axios多种方式调用
    • 工具函数
    • axios的拦截器如何实现?用的设计模式是哪种?
    • axios如何实现取消请求,和cancelToken如何使用

axios基本概念

axios是目前比较流行的一个js库,是一个基于promise的网络数据请求库,主要用于发送网络数据请求,从后台服务器上获取数据返回给前端。

优点特性:

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

axios多种方式调用

axios的常用几种方式就是:

  • axios.get(url,config); url表示请求地址,config表示配置对象
  • axios.post(url,config)
  • axios(config)

从上面可以看出axios既可以当函数axios()使用又可以当对象axios.get()使用,原理: 实质上axios是一个函数,但函数也属于是一个对象,所以同样可以向它身上追加属性和方法,我们所使用的axios是通过createInstance这个函数创造出来的,它简单实现的源码如下。
函数中实例化了Axios,Axios真正调用的是Axios原型链上的request方法;因此导出的axios需要关联到request方法,这里巧妙的通过bind函数进行关联,生成关联后的instance函数,同时指定它的调用上下文就是Axios的实例对象,因此instance调用时也能获取到实例对象上的defaults和interceptors属性;但是仅仅关联request还不够,再通过extend函数将Axios原型对象上的所有get、post等函数扩展到instance函数上,因此这也是我们才能够使用多种方式调用的原因所在。

function createInstance(defaultConfig) {// 1.实例化Axiosvar context = new Axios(defaultConfig);// 2.注意这里bind是一个自定义函数,返回一个函数()=>{Axios.prototype.request.apply(context,args)}// 这里request基本是Axios的核心方法,相当于将这些方法全部绑到了实例化的对象上var instance = bind(Axios.prototype.request, context);// Copy axios.prototype to instance// 3.将Axios原型链上的其他方法也都绑定到instance上去,这些方法的this会指向contxtutils.extend(instance, Axios.prototype, context);// Copy context to instance// 4.将contxt上的属性复制到instance上去utils.extend(instance, context);return instance;
}

axios的构造函数Axios,Axios函数在原型对象上还挂载了request、get、post等函数,但是get、post等函数最终都是通过request函数来发起请求的。而且request函数最终返回了一个Promise对象, 因此我们才能通过then函数接收到请求结果。

class Axios {constructor(instanceConfig) {this.defaults = instanceConfig;this.interceptors = {request: new InterceptorManager(),response: new InterceptorManager()};}request() {}}

一个是将默认配置保存到defaults,另一个则是构造了interceptors拦截器对象
核心request函数主要作用:

  • 兼容多种传参方式(1. request(‘example/url’, { method: ‘post’ }); request({ url: ‘example/url’, method: ‘post’ }))
  • 合并参数
  • 通过promise的链式调用,处理请求、响应拦截器以及发送请求等操作。

工具函数

  • bind:将Axios原型上的方法挂载到instance上
  • extend:将构造函数 Axios.prototype 上的方法挂载到新的实例 instance 上,然后将原型各个方法中的 this 指向 context

axios的拦截器如何实现?用的设计模式是哪种?

拦截器实现就只有一个属性(用于保存拦截器)及三个原型方法(添加、移除、执行)。

实例化axios后,就可以调用use进行绑定拦截器,需要注意的是,在传递use方法的第一个参数时必须返回config,保证下一个promise能获取到处理后的参数。 options是可选参数对象,可传入两个属性(synchronous, runWhen),这么设计就是使用了责任链设计模式。

axios采用promise.resolve的方式将拦截器异步化。将所有请求拦截器放在请求方法之前unshift,所有的响应拦截器放在后push。遍历所有的方法通过promise的then方法将所有方法放在一条链上。

责任链模式是一种行为设计模式, 允许你将请求沿着处理者链进行发送。 收到请求后, 每个处理者均可对请求进行处理, 或将其传递给链上的下个处理者。
优点:

  • 你可以控制请求处理的顺序。
  • 单一职责原则。 你可对发起操作和执行操作的类进行解耦。
  • 开闭原则。 你可以在不更改现有代码的情况下在程序中新增处理者。

责任链模式:执行的顺序是请求拦截器 -> 发起请求 -> 响应拦截器,这其实就是一个链条上串起了三个职责。

axios如何实现取消请求,和cancelToken如何使用

  1. 创建一个 CancelToken 的实例,它有一个 executor 函数,可以通过调用 executor 参数中的 cancel 函数来取消请求。
  2. 在 axios 请求配置中指定 cancelToken 属性,将 CancelToken 实例传递进去。
  3. 当我们需要取消请求时,调用 CancelToken 实例的 cancel() 方法即可取消对应的请求。
  4. axios 检测到配置的 cancelToken 被取消,就会取消掉这个请求,并在错误回调中返回一个 Cancel 错误。
  5. axios 内部会监听 cancelToken 实例的 cancel 信号,一旦触发就会跳出队列,取消对应请求的执行。

使用方法:

import axios from 'axios';
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {// executor 函数接收一个 cancel 函数作为参数cancel = c;})
});
// 取消请求
cancel('Operation canceled by the user.');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/632368.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ 并发编程 | 进程与线程

一、进程与线程 1、进程 1.1、定义 操作系统中最核心的概念就是进程,进程是对正在运行中的程序的一个抽象,是系统进行资源分配和调度的基本单位。进程是一种抽象的概念,一般由程序、数据集合和进程控制块三部分组成,如下&#x…

乐观锁与悲观锁:高并发场景下的选择

😄 19年之后由于某些原因断更了三年,23年重新扬帆起航,推出更多优质博文,希望大家多多支持~ 🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志 🎐 个人CSND主页——Mi…

实战纪实 | 记一次攻防演练

看到一处登录后台,各种操作都尝试过无果,翻了一下js,看到一处文件上传接口泄露(没图了,已经整改了) 构造上传数据包,很nice,上传成功 直接连接webshell,搭建隧道进行内网穿透 翻看配置文件&…

python两数之和

给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。 你可以按任意顺序返回…

笙默考试管理系统---countop

笙默考试管理系统---countop 目录 笙默考试管理系统---countop 一、 笙默考试管理系统-MyExamTest----countop 二、 笙默考试管理系统-MyExamTest----countop 三、 笙默考试管理系统-MyExamTest----countop 四、 笙默考试管理系统-MyExamTest----countop 五、 笙默…

TCP 拥塞控制对数据延迟的影响

哈喽大家好,我是咸鱼 今天分享一篇文章,是关于 TCP 拥塞控制对数据延迟产生的影响的。作者在服务延迟变高之后进行抓包分析,结果发现时间花在了 TCP 本身的机制上面:客户端并不是将请求一股脑发送给服务端,而是只发送…

【开源】基于JAVA语言的河南软件客服系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统管理人员2.2 业务操作人员 三、系统展示四、核心代码4.1 查询客户4.2 新增客户跟进情况4.3 查询客户历史4.4 新增服务派单4.5 新增客户服务费 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的河…

字符串不可变性以及StringBuilder和StringBuffer在字符串拼接中的作用和扩容机制

java字符串的不可变性 在jdk1.8及以前,字符串底层存储用的是一个字符(char)类型的数组,jdk1.9之后用的是整型中的字节型(byte)数组来存储字符串。以下下主要以jdk1.8为例子展开。 private final char value…

新能源汽车出海业务之报关

引言 在做中国新能源汽车出海业务的信息化建设过程,秉承着深入了解业务的原则,对业务全链路进行学习了解总结,本文是针对出口报关业务环节的一些个人积累总结,供与诸位交流学习。 业务概述 报关是指在国际贸易中,出口…

Day34 贪心算法 part03 1005. K 次取反后最大化的数组和 134. 加油站 135. 分发糖果

贪心算法 part03 1005. K 次取反后最大化的数组和 134. 加油站 135. 分发糖果 1005. K 次取反后最大化的数组和 思路 第一步,从前向后遍历,遇到负数将其变为正数,同时K–第二步:如果K还大于0,那么反复转变数值最小的…

Marin说PCB之关于1000 BASE-T1--ESD的处理知多少?

对于板子上的ESD器件想必大家做硬件或者是layout应该的不陌生吧,我们几乎遇到大部分板子上面的接口部分都会添加这个ESD器件,例如那些USB,MIPI接口,百兆/千兆-T1以太网连接器等。 其中T1连接器用的是罗森博格家的,在这个链路中有一…

腾讯云轻量化应用服务器_轻量化应用服务器_轻量化私有云

腾讯云轻量应用服务器开箱即用、运维简单的轻量级云服务器,CPU内存带宽配置高并且价格特别便宜,大带宽,但是限制月流量,轻量2核2G3M带宽62元一年、2核2G4M优惠价118元一年,540元三年、2核4G5M带宽218元一年&#xff0c…

第二百七十四回

文章目录 1. 概念介绍2. 方法与类型2.1 使用方法2.2 常见类型 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何加载本地图片"相关的内容,本章回中将介绍如何获取文件类型.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章回…

[python]变量与常量

变量 语法结构: 变量名valueluck_number8在堆内存中开一块空间,放入8,栈内存中变量名luck_number指向堆当中的内存空间 通过赋不同类型的值,可以直接动态修改python变量的数据类型 在python中允许多个变量指向同一个值 nonum…

Docker 仓库管理

Docker 仓库管理 仓库(Repository)是集中存放镜像的地方。以下介绍一下 Docker Hub。当然不止 docker hub,只是远程的服务商不一样,操作都是一样的。 Docker Hub 目前 Docker 官方维护了一个公共仓库 Docker Hub。 大部分需求…

如何在MinIO存储服务中通过Buckets实现远程访问管理界面上传文件

文章目录 前言1. 创建Buckets和Access Keys2. Linux 安装Cpolar3. 创建连接MinIO服务公网地址4. 远程调用MinIO服务小结5. 固定连接TCP公网地址6. 固定地址连接测试 前言 MinIO是一款高性能、分布式的对象存储系统,它可以100%的运行在标准硬件上,即X86等…

chatgpt和文心一言哪个更好用

ChatGPT和文心一言都是近年来备受关注的人工智能语言模型。它们在智能回复、语言准确性、知识库丰富度等方面都有着较高的表现。然而,它们各自也有自己的特点和优势。在本文中,我们将从这几个方面对这两个模型进行比较,以帮助您更好地了解它们…

C#: richTextBox 富文本编辑控件使用

说明:在C#中,RichTextBox 是一个非常有用的控件,它允许用户在 Windows Forms 应用程序中编辑富文本格式的文本。RichTextBox 控件提供了许多功能,如字体、颜色、背景颜色、下划线、删除线、项目符号和编号列表等。 1.创建一个简单…

ArcGIS Pro 标注牵引线问题

ArcGIS Pro 标注 模仿CAD坐标牵引线问题 右键需要标注的要素,进入标注属性。 选择背景样式 在这里有可以选择的牵引线样式 选择这一个,可以根据调整间距来进行模仿CAD标注样式。 此图为cad样式 此为调整后gis样式 此处可以调整牵引线的样式符号 …

ClickHouse学习笔记(六):ClickHouse物化视图使用

文章目录 1、ClickHouse 物化视图2、物化视图 vs 普通视图3、物化视图的优缺点4、物化视图的用法4.1、基本语法4.2、准备表结构4.3、准备数据4.4、查询结果 1、ClickHouse 物化视图 ClickHouse 的物化视图是一种查询结果的持久化,它的存在是为了带来查询效率的提升…