Promise对Ajax的封装

Jquery的ajax

在开发中，我们常常会用到ajax,根据请求的地址，服务器返回相应的success或者error，而且ajax也是可以异步的，async为true的时候为异步，反之同步，下面以异步为例，因为我们的Promise就是异步操作。

$.ajax({
    cache: true,
    type: "GET",
    url: "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1",
    dataType: "json",
    async: true,
    success: function(data) {
        callback(data);
    },
    error: function(data) {
        console.info("error: " + data.responseText);
    }
});

上面的ajax请求的意思就是，当我异步请求一个url地址时，如果成功则会执行callback,否则打印出错误信息，所以ajax请求，不论结果是什么，都只有一种结果，success或者error。这和我们的Promise不谋而合，那我们也可以用Promis去封装我们的ajax。

Promise封装Ajax

我们知道Promise会接收两个参数，resolve(成功)和reject(失败)，我们可以用这两个参数代替ajax的success和error，并使用链式调用,then里面执行成功的操作，catch里面执行错误的信息。这里会涉及到http方面的知识，相关参数可以参考这个链接

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/send

const $ajax = function(url) {
    return new Promise((resolve, reject) => {
        // 创建 XMLHttpRequest对象,用于在后台与服务器交换数据。
        let request = new XMLHttpRequest()
            //设置向服务器提交的方式
        request.open("GET", url, true)
        request.responseType = 'json'
        request.setRequestHeader("Accept", "application/json");
        // onreadystatechange捕获事件请求的状态
        request.onreadystatechange = function handlerRequest() {
            //readyState为4的时候，代表请求操作已经完成，这意味着数据传输已经彻底完成或失败。
            if (this.readyState === 4) {
                //请求成功
                if (this.status === 200) {
                    resolve(this.response)
                } else {
                    reject(new Error(this.statusText));
                }
            }
        }
        //发送 HTTP 请求,默认异步请求
        request.send();
    })
}

$ajax("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1")
    .then((resolve) => {
        console.log(resolve)
    })
    .catch((reject) => {
        console.log(reject)
    })

上面的js,刚开始我直接在vscode里面运行，发现直接报错 "XMLHttpRequest is not defined",但是我在html引入改该s,就没有报错了，一直不懂为啥@**@

总结:其实我们开发中并不会用到这么麻烦的封装，直接用jquery封装好的ajax的就可以，如果是vue的话，你可以去看看 vue-resource和axios,发现和Promise何其相似，所以我们开发的过程中，去了解开发的思想是非常的重要。

Promise对Ajax的封装

猜你喜欢