基于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。

相关推荐

  1. 基于Promise + XHR 封装myAxios函数

    2024-04-25 07:18:04       39 阅读
  2. 函数封装冒泡排序

    2024-04-25 07:18:04       34 阅读
  3. Vue3 Hooks函数使用及封装

    2024-04-25 07:18:04       53 阅读
  4. react18封装公共请求函数

    2024-04-25 07:18:04       31 阅读
  5. 基于MapBox的方法封装及调用

    2024-04-25 07:18:04       53 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-25 07:18:04       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-25 07:18:04       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-25 07:18:04       87 阅读
  4. Python语言-面向对象

    2024-04-25 07:18:04       96 阅读

热门阅读

  1. Flutter 项目添加 IOS 小组件开发记录

    2024-04-25 07:18:04       37 阅读
  2. linux命令之printf

    2024-04-25 07:18:04       37 阅读
  3. TCP详解

    TCP详解

    2024-04-25 07:18:04      31 阅读
  4. 【Altium Designer-画板指南】

    2024-04-25 07:18:04       32 阅读
  5. 骑砍2霸主MOD开发(8)-action_sets.xml骨骼动画

    2024-04-25 07:18:04       36 阅读
  6. elment-table实现行滚动效果

    2024-04-25 07:18:04       36 阅读
  7. 平时学习得到的

    2024-04-25 07:18:04       37 阅读