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

相关推荐
linweidong4 天前
金山云前端开发面试题及参考答案(上)
promise·前端面试·事件冒泡·表单控件·前端面经·css盒子·react项目
是罐装可乐8 天前
前端架构知识体系:深入理解 sessionStorage、opener 与浏览器会话模型
开发语言·前端·javascript·promise·语法糖
止观止19 天前
告别回调地狱:深入理解 JavaScript 异步编程进化史
javascript·ecmascript·promise·async/await·异步编程·前端进阶
Beginner x_u20 天前
从 Promise 到 async/await:一次把 JavaScript 异步模型讲透
javascript·ajax·promise·异步·async await
keyV1 个月前
告别满屏 v-if:用一个自定义指令搞定 Vue 前端权限控制
前端·vue.js·promise
Sherry0071 个月前
从零开始理解 JavaScript Promise:彻底搞懂异步编程
前端·javascript·promise
1024肥宅2 个月前
手写 Promise:深入理解 JavaScript 异步编程的核心
前端·javascript·promise
www_stdio2 个月前
深入理解 Promise 与 JavaScript 原型链:从基础到实践
前端·javascript·promise
之恒君2 个月前
PromiseResolveThenableJobTask 的在Promise中的使用
javascript·promise
之恒君2 个月前
Promise.resolve(x) 等同 new Promise(resolve => resolve(x))?
前端·promise