promise封装ajax函数

最新推荐文章于 2025-07-25 21:28:21 发布

原创最新推荐文章于 2025-07-25 21:28:21 发布 · 544 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种使用Promise封装AJAX请求的方法，通过创建自定义的ajax函数，该函数接收请求方法、URL和数据作为参数，并返回一个Promise对象。当AJAX请求成功时，Promise会解析为响应文本；若请求失败，则Promise会被拒绝并附带HTTP状态码。此外，文章还展示了如何使用then和catch方法来处理AJAX的成功和失败情况。

1、封装

// ajax函数将返回Promise对象:
function ajax(method, url, data) {
    var request = new XMLHttpRequest();
    return new Promise(function (resolve, reject) {
        request.onreadystatechange = function () {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    resolve(request.responseText);
                } else {
                    reject(request.status);
                }
            }
        };
        request.open(method, url);
        request.send(data);
    });
}

2、调用

var p = ajax('GET', '/api/categories');
p.then(function (text) { // 如果AJAX成功，获得响应内容
    console.log(text);
}).catch(function (status) { // 如果AJAX失败，获得响应代码
    console.log(status);
});