基于Promise + XHR 封装myAxios函数

embedded/2024/9/22 19:43:48/

在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.ppmy.cn/embedded/20966.html

相关文章

加速博客体验:静态资源优化技巧大揭秘!

如今有许多人涉足博客写作&#xff0c;其中大多数正处于博客创作的旅程中。每位程序员都梦想拥有自己的服务器&#xff0c;理想情况下&#xff0c;服务器配置越高越好&#xff0c;价格越实惠越好。购买一台基础款服务器用于建立博客是一个不错的选择&#xff0c;因为并不需要处…

如何拥有自己的私有docker仓库

当然可以&#xff0c;以下是搭建私有Docker仓库的详细步骤&#xff1a; 一、准备工作 确定服务器&#xff1a;首先&#xff0c;你需要有一台服务器&#xff0c;用于部署Docker私有仓库。这台服务器需要安装Docker&#xff0c;并且有足够的存储空间来存储镜像。 检查Docker版本…

有哪些好用的外贸获客软件啊?

外贸获客软件是外贸业务中非常重要的工具&#xff0c;它们能够帮助企业更有效地找到潜在客户&#xff0c;提高业务效率。以下是一些比较好用的外贸获客软件&#xff1a; 易谷歌地图数据采集大师&#xff1a;基于谷歌地图的采集工具&#xff0c;可以采集任意国家、任意地区的公司…

探索和构建 LLaMA 3 架构:深入探讨组件、编码和推理技术(八)Transformer块

探索和构建 LLaMA 3 架构&#xff1a;深入探讨组件、编码和推理技术&#xff08;八&#xff09;编码器块 Transformer块 由于 只关注模型的推理&#xff0c;因此 只会研究transformer块 class EncoderBlock(nn.Module):def __init__(self, args: ModelArgs):super().__init__…

C语言入门课程学习笔记-6

C语言入门课程学习笔记-6 第27课 - 字符数组与字符串&#xff08;上&#xff09;第28课 - 字符数组与字符串&#xff08;下&#xff09;第29课 - 数组专题练习&#xff08;上&#xff09;第30课 - 数组专题练习&#xff08;下&#xff09; 本文学习自狄泰软件学院 唐佐林老师的…

学习java第五十三天

Spring器中的bean可以分为5个范围&#xff1a; singleton&#xff1a;这种bean范围是默认的&#xff0c;这种范围确保不管接受多少请求&#xff0c;每个容器中只有一个bean的实例&#xff0c;单例模式&#xff1b; prototype&#xff1a;为每一个bean提供一个实例&#xff1b…

【数据结构】链表经典算法OJ题目练习

203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; 思路1&#xff1a;遍历原链表&#xff0c;将val链表释放掉 思路2&#xff1a;创建新链表 206. 反转链表 - 力扣&#xff08;LeetCode&#xff09; 思路1&#xff1a;创建新链表&#xff0c;将原链表中的节点拿过来…

ROS机器人入门第七课:参数服务器

文章目录 ROS机器人入门第七课&#xff1a;参数服务器一、参数服务器介绍二、参数操作1.参数服务器新增(修改)参数2.参数服务器获取参数3.参数服务器删除参数 ROS机器人入门第七课&#xff1a;参数服务器 一、参数服务器介绍 参数服务器在ROS中主要用于实现不同节点之间的数据…