基于 xhr 实现 axios

基于 xhr 实现 axios

上面我们讲到二次封装 axios ,但是现在我们尝试完全脱离 axios,自己实现一个 axios,由于 axios 底层是基于 xhr 做了二次封装,所以我们也可以尝试一下。

xhr 二次封装

src/plugins/xhr.js

/*** 请求拦截器队列* 响应拦截器队列*/
const request = []
const response = []/*** xhr 封装*/
function axios(config) {return new Promise((resolve) => {request.forEach((fn) => (config = fn(config)))const { method, url, data, headers } = config/*** 新建请求*/const xhr = new XMLHttpRequest()xhr.open(method, url)/*** 设置请求头*/for (const key in headers) {xhr.setRequestHeader(key, headers[key])}/*** 发送请求*/xhr.send(data)/*** 监听返回值*/xhr.onreadystatechange = () => {if (!(xhr.readyState === 4 && xhr.status === 200)) returnlet data = JSON.parse(xhr.responseText)response.forEach((fn) => (data = fn(data)))resolve(data)}})
}/*** 拦截器定义*/
axios.interceptors = {request: {use: (fn) => {request.push(fn)}},response: {use: (fn) => {response.push(fn)}}
}export default axios

axios 二次封装

src/plugins/axios.js

import axios from './xhr'
import qs from 'qs'/*** 请求拦截器*/
axios.interceptors.request.use((config) => {config.data = qs.stringify(config.data)return config
})/*** 响应拦截器*/
axios.interceptors.response.use((response) => {if (response.code !== 200) {alert('接口响应失败')}return response
})/*** 接口请求方法*/
const request = (method, option) => {return axios({method: method,url: 'https://study.noxussj.top' + option.url,data: option.data,headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
}export default {get: (option) => request('get', option),post: (option) => request('post', option),put: (option) => request('put', option)
}

调用

import axios from './plugins/axios.js'/*** 发起请求*/
const p1 = axios.post({url: '/api/login',data: { account: 'test', password: '123456' }
})p1.then((res) => {console.log(res.data)
})

在这里插入图片描述

修改后预览效果,依然是可以正常请求接口。

在这里插入图片描述

原文链接:菜园前端

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

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

相关文章

新能源电驱动总成相关标准简介

新能源电驱动总成相关标准简介 电驱动系统标准体系是电动汽车标准体系中重要的组成部分,其制定和更新对于保障电动汽车的使用性能和安全性能具有非常重要的作用。 随着电动汽车行业的快速发展和普及,电驱动系统的重要性也越来越凸显。为了确保电动汽车的…

循环神经网络(RNN) | 项目还不成熟 |还在初级阶段

一,定义 循环神经网络(Recurrent Neural Network,RNN)是一种深度学习神经网络架构,专门设计用于处理序列数据,如时间序列数据、自然语言文本等(一般用来解决序列问题)。 因为它们具…

ResNet详解:网络结构解读与PyTorch实现教程

目录 一、深度残差网络(Deep Residual Networks)简介深度学习与网络深度的挑战残差学习的提出为什么ResNet有效? 二、深度学习与梯度消失问题梯度消失问题定义为什么会出现梯度消失?激活函数初始化方法网络深度 如何解决梯度消失问…

线性代数的学习和整理12: 矩阵与行列式,计算上的差别对比

目录 1 行列式和矩阵的比较 2 简单总结矩阵与行列式的不同 3 加减乘除的不同 3.1 加法不同 3.2 减法不同 3.3 标量乘法/数乘 3.3.1 标准的数乘对比 3.3.2 数乘的扩展 3.4 乘法 4 初等线性变换的不同 4.1 对矩阵进行线性变换 4.2 对行列式进行线性变换 1 行列式和…

算法通关村第5关【白银】| 哈希和栈经典算法题

1.两个栈实现队列 思路:两个栈,一个输入栈,一个输出栈。 当需要输入的时候就往inStack中插入,需要输出就往outStack中输出,当输出栈是空就倒出输入栈的数据到输出栈中,这样就保证了后插入的数据从栈顶倒入…

Docker修改容器ulimit的全部方案及各方案的详细步骤

要修改Docker容器的ulimit(用户资源限制),有以下三种方案,每个方案的详细步骤如下: 方案一:在Dockerfile中设置ulimit 打开您的Dockerfile。在文件中添加以下命令来修改ulimit:RUN ulimit -n …

他们朝我扔泥巴(scratch)

前言 纯~~~属~~~虚~~~构~~~(同学看完短视频要我做,蟹蟹你) 用scratch做的,幼稚得嘞( ̄_ ̄|||)呵呵(强颜欢笑) 完成视频 视频试了好久,就是传不上来,私信我加我…

LabVIEW开发灭火器机器人

LabVIEW开发灭火器机器人 如今,自主机器人在行业中有着巨大的需求。这是因为它们根据不同情况的适应性。由于消防员很难进入高风险区域,自主机器人出现了。该机器人具有自行检测火灾的能力,并通过自己的决定穿越路径。 由于消防安全是主要问…

开源项目-数据可视化分析平台

哈喽,大家好,今天给大家带来一个开源项目-数据可视化分析平台。项目通过SpringBoot实现 数据可视化分析平台主要有数据源管理,项目管理,数据集管理,图表管理,看板管理等功能 登录 数据源管理 数据源管理功能可以添加MySQL,Oracle,PostgreSQL等类型的数据源信息 项目…

24 WEB漏洞-文件上传之WAF绕过及安全修复

目录 WAF绕过上传参数名解析:明确哪些东西能修改?常见绕过方法:符号变异-防匹配( " ;)数据截断-防匹配(%00 ; 换行)重复数据-防匹配(参数多次)搜索引擎搜索fuzz web字典文件上传安全修复方案 WAF绕过 safedog BT(宝塔) XXX云盾 宝塔过滤的比安全狗厉害一些&a…

LeetCode 热题 100(七):105. 从前序与中序遍历序列构造二叉树、14. 二叉树展开为链表

题目一: 105. 从前序与中序遍历序列构造二叉树https://leetcode.cn/problems/construct-binary-tree-from-preorder-and-inorder-traversal/ 思路:依据前序遍历的根左右和中序遍历的左根右, 且根左长度=左根 代码: …

【已解决】pycharm突然双击无法打开,重启电脑也不管用

1.问题: pycharm突然双击无法打开,重启电脑也不管用 2.解决 2.1 方法一(修改Roaming) 1.找到C盘对应路径下的pycharm版本 2. 用记事本打开文件类型为VMOPTIONS文件 3. 修改或删除最后一行的映射路径 4.保存退出 2.2 方法二…

二级MySQL(二)——编程语言,函数

SQL语言又称为【结构化查询语言】 请使用FLOOR(x)函数求小于或等于5.6的最大整数 请使用TRUNCATE(x,y)函数将数字1.98752895保留到小数点后4位 请使用UPPER()函数将字符串‘welcome’转化为大写…

Linux重置ROOT密码(CentOS)

解释说明 在CentOS中重置root密码通常需要进入单用户模式,这是一个没有密码限制的特殊模式,允许您以root权限登录系统并更改密码。 重启系统 如果您无法登录到系统,可以通过重启系统来开始这个过程。您可以使用虚拟机控制台、物理服务器控制台…

Leetcode 191.位1的个数

编写一个函数,输入是一个无符号整数(以二进制串的形式),返回其二进制表达式中数字位数为 1 的个数(也被称为汉明重量)。 提示: 请注意,在某些语言(如 Java)中…

java+springboot+mysql农业园区管理系统

项目介绍: 使用javaspringbootmysql开发的农业园区管理系统,系统包含超级管理员、管理员、用户角色,功能如下: 超级管理员:管理员管理;用户管理;土地管理(租赁)&#x…

语言模型(language model)

文章目录 引言1. 什么是语言模型2. 语言模型的主要用途2.1 言模型-语音识别2.2 语言模型-手写识别2.3 语言模型-输入法 3. 语言模型的分类4. N-gram语言模型4.1 N-gram语言模型-平滑方法4.2 ngram代码4.3 语言模型的评价指标4.4 两类语言模型的对比 5. 神经网络语言模型6. 语言…

RabbitMQ的镜像队列

镜像队列 如果 RabbitMQ 集群中只有一个 Broker 节点,那么该节点的失效将导致整体服务的临时性不可用,并且也可能会导致消息的丢失。可以将所有消息都设置为持久化,并且对应队列的durable 属性也设置为 true ,但是这样仍然无法…

基于java swing和mysql实现的汽车租赁管理系统(源码+数据库+文档+运行指导视频)

一、项目简介 本项目是一套基于java swing和mysql实现的汽车租赁管理系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含:项目源码、项目文档、数据库脚本等,该项目附带全部源码可作为毕设使用。 项目都经…

计算机竞赛 基于YOLO实现的口罩佩戴检测 - python opemcv 深度学习

文章目录 0 前言1 课题介绍2 算法原理2.1 算法简介2.2 网络架构 3 关键代码4 数据集4.1 安装4.2 打开4.3 选择yolo标注格式4.4 打标签4.5 保存 5 训练6 实现效果6.1 pyqt实现简单GUI6.3 视频识别效果6.4 摄像头实时识别 7 最后 0 前言 🔥 优质竞赛项目系列&#xf…