使用promise二次封装ajax
时间: 2023-08-24 10:27:04 浏览: 98
wx-ajax-promise:微信小程序中的 promise 封装的 ajax
好的,下面是使用 Promise 二次封装 AJAX 的示例代码:
```javascript
function ajax(url, method, data) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
resolve(JSON.parse(xhr.responseText));
} else {
reject(xhr.statusText);
}
}
}
xhr.onerror = function() {
reject('网络异常,请稍后重试');
}
xhr.send(JSON.stringify(data));
});
}
```
使用示例:
```javascript
ajax('/api/user', 'POST', {name: 'test', age: 18}).then(function(res) {
console.log(res);
}).catch(function(error) {
console.log('请求失败:' + error);
});
```
在这个示例中,我们定义了一个 `ajax` 函数,它接收三个参数:请求的 URL、请求的方法和请求的数据。它返回一个 Promise 对象,通过 `resolve` 和 `reject` 方法来处理请求成功和失败的情况。
在函数内部,我们创建了一个 XMLHttpRequest 对象,并设置请求的方法、请求头和请求数据。我们使用 `onreadystatechange` 事件来监听请求的状态变化,当请求状态为 4 时(即请求完成),我们判断状态码,如果为 200 则调用 `resolve` 方法,并将响应的 JSON 数据作为参数传递给它;否则调用 `reject` 方法,并将状态文本作为参数传递给它。在请求过程中如果发生错误,则调用 `onerror` 事件处理函数,并将错误信息作为参数传递给 `reject` 方法。
在使用示例中,我们调用 `ajax` 函数,并传递请求的 URL、请求方法和请求数据,然后使用 `then` 方法来处理请求成功的情况,使用 `catch` 方法来处理请求失败的情况。在成功的情况下,我们打印响应数据,在失败的情况下,我们打印错误信息。
阅读全文