2.用Promise对AJAX进行简单的封装

想必都用过ajax 的请求吧，那么为什么需要用promise对ajax封装？

使用promise 发送请求前，我们需要在ajax绑定事件中对返回的事件进行操作，

而使用promise后，只需要在promise外的用then等方法进行操作，看起来更简洁好看，便于ajax请求简化

代码语言：javascript复制

        const p = new Promise((resolve, reject) => {
            //1. 创建对象
            const xhr = new XMLHttpRequest();

            //2. 初始化
            xhr.open("GET", "https://api.apiopen.top/getJ");

            //3. 发送
            xhr.send();

            //4. 绑定事件, 处理响应结果
            xhr.onreadystatechange = function() {
                //判断
                if (xhr.readyState === 4) {
                    //判断响应状态码 200-299
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //表示成功
                        resolve(xhr.response);
                    } else {
                        //如果失败
                        reject(xhr.status);
                    }
                }
            }
        })

现在看上面的ajax的请求是不是简化好看一点，没有对请求回来的数据处理 下面用then 方法进行指定回调

代码语言：javascript复制

        p.then(function(value) {
            console.log(value);
        }, function(reason) {
            console.error(reason);
        });

promise 事件 ajax 数据处理 function

0 人点赞