深入理解javascript系列(十九):从Promise开始到async/await

下面简单介绍一下Promise的相关基础知识：

• new Promise表示创建一个Promise实例对象。
• Promise函数中的第一参数为一个回调函数，也可以称之为executor。通常情况下，在这个函数中，会执行发起请求操作，并修改结果的状态值。
• 请求结果有三种状态，分别是pending（等待中，表示还没有得到结果）、resolved（得到了我们想要的结果，可以继续执行），以及rejected（得到了错误的，或者不是我们期望的结果，拒绝继续执行）。请求结果的默认状态为pending。在executor函数中，可以分别使用resolve与rejected将状态修改为对应的resolved与rejected。resolve、reject是executor函数的两个参数，它们能够将请求结果的具体数据传递出去。
• Promise实例拥有的then方法，可以用来处理当请求结果的状态变成resolved时的逻辑。then的第一个参数为一个回调函数，该函数的参数是resolve传递出来的数据。在上面的例子中，result = tag is true。
• Promise实例拥有的catch方法，可用来处理当前请求结果的状态变成rejectd时的逻辑。catch的第一个参数为一个回调函数，该函数的参数是一个reject传递出来的数据。在上面的例子中，err = tag is false。

var url = 'api/xxxx';

//封装一个get请求的方法
function getJSON(url) {
    return new Promise(function(resolve, reject) {
        //利用Ajax发送一个请求
        var XHR = new XMLHttpRequest();
        XHR.open('GET', url, true);
        XHR.send();

        //等待结果
        XHR.onreadystatechange = function() {
            if(XHR.readyState == 4) {
                if(XHR.status == 200) {
                    try {
                        var res = JSON.parse(XHR.responseText);
                        // 得到正确的结果修改状态并将数据传递出去
                        resolve(response);
                    } catch(e) {
                        reject(e)
                    }
                } else {
                    // 得到错误的结果并抛出异常
                    reject(new Error(XHR.statusText));
                }
            }
        }
    })
}


//封装好以后，使用就很简单了
getJSON(url).then(function(res){
    console.log(res)
})

var url1 = 'xxx';
var url2 = 'xxxxx';

function renderAll() {
    return Promise.all([getJSON(url1), getJSON(url2)]);
}

renderAll().then(function(value) {
    console.log(value);
})

async function fn() {
    return 30;
}

//或者
const fn = async ()=> {
    return 30;
}

console.log(fn());

//打印结果
Promise {<resolved>: 30}__proto__:Promise[[PromiseStatus]]:"resolved"[[PromiseValue]]:30