实用主义：Promise让异步回调更加优雅

MrTreasure

发布于 2018-05-10 11:09:45

6930

发布于 2018-05-10 11:09:45

前言

函数作为一等对象，使得javascript这种弱类型，单线程脚本语言的异步方法极为方便，只需要一个callback，编译器就能按照我们的想法执行命令。如果只有一个简单的异步操作，我们可以稍费脑子理清执行顺序，但是如果有多个异步方法，呃，我们就可能掉进了回调陷阱，事情远远没有我们想到的那么简单，并且我们甚至还没考虑过异步中抛出的错误。

还好Promise的出现，解救了我们，这篇文章不是讲解Promise的详细使用方法，只是通过两个例子，看看Promise的优雅之处，详细资料请参考阮一峰老师《ES6标准入门》

传统的ajax回调

代码运行于最新的Chrome版本中，Chrome目前已支持除模块以外的大部分ES6方法

let xhr = new XMLHttpRequest();
    let url = 'http://chat.hstar.org:8601/rkyNA2Yvl/promise';
    xhr.responseType = "text";
    xhr.open('get', url, true);
    xhr.onreadystatechange = ((data) => {
        if (xhr.readyState===4 && xhr.status===200) {
                let data = JSON.parse(xhr,responseText);
                console.log(data.word);
        }
    });
    xhr.send(null);

结果

这是一个传统的ajax回调，我们把所有事务逻辑封装在onreadystatechange事件中，并且xhr的生成与使用都在一块代码内。后期的维护、DOM操作都只能该事件中进行，这只是一个异步事件，如果是多个异步事件，并且需要所有事件都能完成才能操作。Oh my god。我们可能已经进入回调地狱。这团代码在后期debug时候足以让我们抓狂。

Promise的出现

我们再来看看一段经过Promise封装的代码

function getPromise(url) {
        let p = new Promise((resolve,reject) => {
          let xhr = new XMLHttpRequest;
          xhr.open('get', url, true);
          xhr.onreadystatechange = () => {
            if (xhr.status == 200 && xhr.readyState===4 ){
                resolve(xhr.responseText);
                }   
            };
            xhr.onerr = function () {
                    reject();
            }
            xhr.send(null);
        });
        return p;
}

首先封装一个Promise对象，我们把响应事件封装在resolve方法中，如果仅仅是这样，那么和普通封装没有区别，我们接着来看看Promise的优雅之处

let promise = getPromise('http://chat.hstar.org:8601/rkyNA2Yvl/promise');
    promise.
    then(data => {
        data = JSON.parse(data);
        return data;
    }).then(data => {
        document.write(data.word);
        console.log(data);
    }).catch(err => {
        console.log(err);
    });

结果

我们通过then（resolve方法的别名），进行回调操作，then方法返回的也是一个Promise对象，因此可以链式调用，这样我们可以按步骤操作返回的数据。并且catch方法会捕捉每一个异步方法中的错误，所有的错误都会冒泡到这里，如果catch方法出现了错误怎么办？别担心done（）方法会处理最后的错误。通过这样的链式调用，使得关注点分离，return的形式也更符合人脑的思考逻辑。前面还提到了多个异步操作，我们同样可以使用Promise.all和Promise.race方法。