基于Promise + XHR 封装myAxios函数

开发小途

于 2024-04-24 21:28:19 发布

阅读量686

点赞数 5

文章标签： XHR Promise

本文链接：https://blog.csdn.net/m0_54007573/article/details/138170103

版权

文章介绍了如何在JavaScript中使用Promise和XMLHttpRequest创建一个基础的myAxios函数，封装GET和POST请求。尽管这个版本相对简单，没有处理所有边缘情况和高级特性，但展示了基本原理。对于更复杂需求，推荐使用axios或fetchAPI。

摘要由CSDN通过智能技术生成

在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。