一览 promise、async/await

一览 promise、async/await

下面用一个http请求来简要概述 Promise, async/await。

• 在没有 Promise 之前 发送一个 http请求是这样：

function httpRequest() {
    var xhr = new XMLHttpRequest();

    xhr.open("GET", "http://cnodejs.org/api/v1/topics", true);

    xhr.onreadystatechange = function(e) {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                // 请求成功，获取数据，然后执行下一步
                console.log('success');
            } else {
                // 请求失败，错误处理，然后执行下一步
                console.log('fail');
            }
        }
    }

    xhr.send(null);
}

httpRequest();

• 当 Promise 出现后：

function createXMLHttpRequest() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://cnodejs.org/api/v1/topics", true);
    xhr.send(null);

    return new Promise(function (resolve, reject) {
        xhr.onreadystatechange = function(e) {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve('success');
                } else {
                    reject('fail');
                }
            }
        }
    });
}

function handlResponse() {
    createXMLHttpRequest().then(function (data) {
        console.log(data);
    }).catch(function (e) {
        console.log(e);
    });

    console.log("run after handler");
}

handlResponse();

• 当 async/await出现：

function createXMLHttpRequest() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://cnodejs.org/api/v1/topics", true);
    xhr.send(null);

    return new Promise(function (resolve, reject) {
        xhr.onreadystatechange = function(e) {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve('success');
                } else {
                    reject('fail');
                }
            }
        }
    });
}

async function handlerResponseAsync () {
    await createXMLHttpRequest().then(function (data) {
        console.log(data);
    }).catch(function (e) {
        console.log(e);
    });

    console.log("run after handler");
}

handlerResponseAsync();