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

相关推荐
之歆2 天前
Promise 基础技术深度解析:从回调地狱到链式调用
前端·okhttp·promise
想要成为糕糕手5 天前
JavaScript 异步编程完全指南
javascript·面试·promise
浮生望7 天前
JavaScript 异步编程核心:从同步阻塞到 Promise 事件循环
javascript·promise
先吃饱再说7 天前
为什么 `setTimeout` 会“插队”?JS 事件循环与 Promise 通关笔记
前端·javascript·promise
海市公约20 天前
Axios网络请求库核心特性与拦截器封装实践
axios·前端开发·promise·拦截器·网络封装
TA远方1 个月前
【JavaScript】Promise对象使用方式研究和理解
javascript·编程·脚本·web·js·promise·委托
Beginner x_u1 个月前
前端八股整理(手写 01)|Promise 超时控制、红绿灯与 Promise.all
前端·javascript·promise
╰つ栺尖篴夢ゞ2 个月前
HarmonyOS Next面试题之异步并发Promise和async/await的核心机制
promise·async/await·taskpool·异步并发·实战陷阱
叫我一声阿雷吧2 个月前
JS 入门通关手册(43):async/await 原理与异常处理(实战 + 面试,彻底搞懂)
javascript·异常处理·promise·前端面试·async/await·generator·异步编程
叫我一声阿雷吧2 个月前
JS 入门通关手册(42):Promise 并发控制(all/race/allSettled/any 手写 + 实战)
javascript·promise·并发控制·promise.all·js异步编程·promise.race·手写promise