基于Promise + XHR 封装myAxios函数

在JavaScript中,你可以使用`Promise`和`XMLHttpRequest`(XHR)来封装一个名为`myAxios`的函数,用于执行HTTP请求。下面是一个简单的示例,它封装了GET和POST请求的基本功能:
function myAxios(url, method = 'GET', data = null) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open(method, url, true);

        // 设置请求头,如果需要的话
        // xhr.setRequestHeader('Content-Type', 'application/json');

        xhr.onload = function () {
            if (this.status >= 200 && this.status < 300) {
                resolve(this.responseText);
            } else {
                reject(new Error(this.statusText));
            }
        };

        xhr.onerror = function () {
            reject(new Error('Network Error'));
        };

        if (method === 'POST' && data) {
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send(JSON.stringify(data));
        } else {
            xhr.send();
        }
    });
}

// 使用示例:
myAxios('https://api.example.com/data')
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.error('Error:', error);
    });

myAxios('https://api.example.com/submit', 'POST', { key: 'value' })
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.error('Error:', error);
    });
这个`myAxios`函数接受三个参数:URL、HTTP方法和请求数据。它返回一个`Promise`,当请求成功时,这个`Promise`会被解析为响应文本;当请求失败时,它会被拒绝并抛出一个错误。

这个简单的实现并没有处理所有可能的边缘情况和特性,例如请求超时、请求取消、请求进度、HTTP认证等。如果你需要这些功能,你可能需要使用更成熟的库,如`axios`或`fetch` API。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Ant Design Vue + js 表格计算合计

1.需要计算的数量固定&#xff08;如表1&#xff0c;已知需要计算的金额为&#xff1a;装修履约保证金 装修垃圾清运费出入证工本费 出入证押金 这四项相加&#xff0c;可以写成固定的算法&#xff09;&#xff1a; 表格样式&#xff1a; <h4 style"margin: 0 0 8px…

TensorFlow进阶一(张量的范数、最值、均值、和函数、张量的比较)

⚠申明&#xff1a; 未经许可&#xff0c;禁止以任何形式转载&#xff0c;若要引用&#xff0c;请标注链接地址。 全文共计3077字&#xff0c;阅读大概需要3分钟 &#x1f308;更多学习内容&#xff0c; 欢迎&#x1f44f;关注&#x1f440;【文末】我的个人微信公众号&#xf…

科研工作学习中常用的录制动图软件——screenToGif

一、前言 俗话说&#xff0c;字不如表&#xff0c;表不如图&#xff0c;静图不如动图。 动图给人的直观感受&#xff0c;还是很不错的。在曾经的学生期间&#xff0c;进行组会汇报&#xff1b;还是如今工作中&#xff0c;给领导汇报。我经常使用screenToGif这款软件&#xff…

Yolov5 v7.0目标检测——详细记录环境配置、自定义数据处理、模型训练与常用错误解决方法(数据集为河道漂浮物)

1. Yolov5 YOLOv5是是YOLO系列的一个延伸&#xff0c;其网络结构共分为&#xff1a;input、backbone、neck和head四个模块&#xff0c;yolov5对yolov4网络的四个部分都进行了修改&#xff0c;并取得了较大的提升&#xff0c;在input端使用了Mosaic数据增强、自适应锚框计算、自…

stm32f103c8t6学习笔记(学习B站up江科大自化协)-UNIX时间戳

UNIX时间戳 UNIX时间戳最早是在UNIX系统使用的&#xff0c;所以叫做UNIX时间戳&#xff0c;之后很多由UNIX演变而来的系统也继承了UNIX时间戳的规定&#xff0c;目前linux&#xff0c;windows&#xff0c;安卓这些操作系统的底层计时系统都是用UNIX时间戳 时间戳这个计时系统和…

5 个有用的 Linux Shell 转义序列

目录 ⛳️推荐 前言          1、退格符 2、换行符 3、换页符 4、制表符 5、Unicode ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站 前言          如何在你的…

计算机网络-IS-IS路由计算

前面已经学习了建立IS-IS邻接关系和同步LSDB&#xff0c;然后基于此路由器会进行路由计算。 一、路由计算 因为IS-IS路由器有不同的级别&#xff0c;只维护自身级别的LSDB&#xff0c;因此就是Level-1只有区域内的路由信息&#xff0c;Level-2有Level-2的路由信息&#xff0c;L…

初始Maven

1.背景 问题引入&#xff1a;为什么要使用 Maven&#xff1f; 1.1 添加第三方 jar 包 在 JavaEE 开发领域&#xff0c;有大量的第三方框架和工具可以供我们使用。使用这些 jar 包最简单的方法就是复制粘贴到 WEB-INF 目录中的 lib 目录下。但是会导致每次创建一个新工程就需要将…

【Linux】信号的产生

目录 一. 信号的概念signal() 函数 二. 信号的产生1. 键盘发送2. 系统调用kill()raise()abort() 3. 软件条件alarm() 4. 硬件异常除零错误:野指针: 三. 核心转储 一. 信号的概念 信号是消息的载体, 标志着不同的行为; 是进程间发送异步信息的一种方式, 属于软中断. 信号随时都…

医药流通企业如何安全访问医药ERP?无需公网IP和改变现有IT架构

随着目前医药流通行业竞争的加剧&#xff0c;市场供应日趋饱和&#xff0c;传统的粗放式管理缺陷逐渐暴露&#xff0c;导致从事医药行业企业的利润不同程度的下滑&#xff0c;想要满足医药行业客户的个性化需求&#xff0c;为适应企业未来发展&#xff0c;医药流通行业越来越多…

Docker 安装 Mongo

创建宿主机目录 在你的宿主机上创建必要的目录来存储 MongoDB 的数据和配置文件。这样做可以保证即使容器被删除&#xff0c;数据也能得到保留。 mkdir -p /develop/mongo/data mkdir -p /develop/mongo/config创建 MongoDB 配置文件 创建一个名为 mongod.conf 的 MongoDB 配…

C语言中整型与浮点型在内存中的存储

今天让我们来看看整型的数据和浮点型的数据在内存中是怎么存储的呢 整型数据在内存中的存储 整型数据在内存中存储的是二进制的补码 正数的话也没什么可说的&#xff0c;原码反码补码都相同 我们来看看负数&#xff1a; 以-5为例 原码&#xff1a;10000000 00000000 00000000 0…

【数据库】Redis

文章目录 [toc]Redis终端操作进入Redis终端Redis服务测试切换仓库 String命令存储字符串普通存储设置存储过期时间批量存储 查询字符串查询单条批量查询 Key命令查询key查询所有根据key首字母查询判断key是否存在查询指定的key对应的value的类型 删除键值对 Hash命令存储hash查…

【HTML】页面引用Vue3和Element-Plus

在现代前端开发中&#xff0c;Vue 3 和 Element Plus 是非常受欢迎的技术。Vue 3 是一个用于构建用户界面的渐进式 JavaScript 框架&#xff0c;而 Element Plus 是一个基于 Vue 3 的组件库&#xff0c;提供了丰富的 UI 组件&#xff0c;帮助开发者快速构建高质量的前端应用。 …

frp 实现 http / tcp 内网穿透(穿透 wordpress )

frp 实现 http / tcp 内网穿透&#xff08;穿透 wordpress &#xff09; 1. 背景简介与软件安装2. 服务端配置2.1 配置文件2.2 wordpress 配置文件2.3 frps 自启动 3.客户端配置3.1 配置文件3.2 frpc 自启动 同步发布在个人笔记frp 实现 http / tcp 内网穿透&#xff08;穿透 w…

多目标粒子群算法及其MATLAB实现

多目标粒子群优化&#xff08;Multi-Objective Particle Swarm Optimization, MOPSO&#xff09;算法是一种基于种群的优化算法&#xff0c;它结合了粒子群优化&#xff08;Particle Swarm Optimization, PSO&#xff09;和多目标优化的思想。多目标粒子群&#xff08;MOPSO&am…

DevOps(八)Jenkins的Maven和Git插件

一、Maven简介 Maven是一个构建生命周期管理和理解工具&#xff0c;用于Java项目。它提供了标准化的构建流程&#xff0c;并简化了从项目编译到文档生成等各种构建方面的管理。 Maven是由Apache软件基金会开发和维护的一个流行的项目管理工具。它的设计目的是简化Java项目的构…

PE结构(二)PE头字段说明

PE头字段 DOS头 PE标记 标准PE头 可选PE头 我们今天分析一下PE头字段中所有重要成员的含义 DOS头 DOS头中我们需要去分析的是如下两个成员&#xff1a; 1.WORD e_magic&#xff1a;MZ标记&#xff0c;用于判断是否为可执行文件&#xff0c;即如果显示4D 5A&#xff0c;…

[2021年最新]国产时序性数据TDenige入门

一、TDenige简介 TDengine&#xff1a;是涛思数据面对高速增长的物联网大数据市场和技术挑战推出的创新性的大数据处理产品&#xff0c;它不依赖任何第三方软件&#xff0c;也不是优化或包装了一个开源的数据库或流式计算产品&#xff0c;而是在吸取众多传统关系型数据库、NoS…

图搜索的经典启发式算法A星(A*、A Star)算法详解

文章目录 1. 引言2. 广度优先搜索3. Dijkstra 算法4. 启发式优先搜索&#xff08;Heuristic&#xff09;4.1 贪心最佳优先搜索4.2 A*搜索 1. 引言 在许多场景中&#xff0c;我们常会遇到一类问题&#xff0c;即“找到一个位置到另一个位置的距离最短&#xff08;用时最少&…
最新文章