使用promise封装ajax

最新推荐文章于 2024-06-17 10:32:02 发布

邮寄给再见

最新推荐文章于 2024-06-17 10:32:02 发布

阅读量150

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_42387315/article/details/109481091

本文介绍了一种使用原生JavaScript和Promise封装Ajax请求的方法。该方法通过定义一个名为ajax的函数实现，支持GET和POST请求，并返回一个Promise对象，以便于进一步处理响应数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用原生JS搭配promise来封装ajax

function ajax({ type = "GET", url = '', data = '' }) {
            let p = new Promise((resolve, reject) => {
                let xhr = new XMLHttpRequest();
                if (type == "GET" && data != undefined) {
                    url = url + "?" + data;
                }        
                xhr.open(type, url);
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        resolve(this.responseText);
                    }
                };
                if (type == "POST" && data != undefined) {
                    xhr.send(data);
                } else {
                    xhr.send();
                }
            });
            return p;
        }

使用方法

ajax({ url: "http://www.ujiuye.tech:3000/api/banner" }).then((data) => {
            console.log(data);
        }, (err) => {
            console.log(err);
        });