ES6的Promise和ES7的Asyn await

目录

ES6的Promise和ES7的Asyn

1，Promise

2，Async await

---

1，Promise

当new 一个Promise实例时，实际内部代码被运行了。

new Promise(function(resolve){  
    console.log('test'); resolve('result');
});
//在控制台输出：
//test
//一个状态为fulfilled，结果为 'result'的 Promise实例：
//Promise{...}

上面代码段创建一个 Promise实例且Promise内部代码也被执行，并在控制端输出 ‘test’， 返回的是一个Promise实例且其状态是 fulfilled，包含的结果为 'result'。在Promise实例上能使用的方法有then、catch、finally; 如这样使用 then方法：

promiseObj.then(function(val){
    console.log(val)
}); 
//控制台输出：
//result

在控制台输出‘result’。Promise的函数参数可有两个参数：resolve和reject，像这样 ：

new Promise(function(resolve, reject){

    reject('test'); //跟resolve一样，可传参可不传
}).catch(function(err){
    console.log(err);
});
//创建一个状态为rejected的Promise实例；可能因浏览器的不同，有些浏览器面对rejected状态的promise实
//例会在控制台报错，可在Promise实例后加上catch捕获异常。但setTimeout里的错误，不会被catch捕获。
//一般使用resolve比较友好。

2，Async await

首先await只能在Async函数内使用。

Async是个关键字，用来定义异步函数：

Async function asyncFn([param1, [param2]])
{ 
    let lastVal = await new Promise(function(resolve){ 
        setTimeout(function(){ resolve('promise') }, 1000); 
    }); 
    //lastVal是最后一次返回的结果，这个结果可能是resolve中传入的结果，
    //也可能是回调函数中return的结果。
    console.log(lastVal); 
    console.log('1s 之后'); 
    return 'timeout'; 
}
//定义了一个异步函数

以上代码段定义了一个异步函数，其实跟普通函数一样，被调用后，内部代码才能被执行；像以下这样调用异步函数：

var proObj = asyncFn(); 
console.log('console here');
//在控制台输出：
//console here
//promise
//1s 之后
//proObj是个 状态为pending的Promise实例，也就是异步函数的调用返回的结果是个Promise实例
//当asncFn的await的逻辑执行完成后，proObj的状态会变成fulfilled，且返回值是'timeout'。
proObj.then(function(val){

    console.log(val);
});
//在控制台输出：
//'timeout'

在控制台输出 'console here'、'promise' 和'1s 之后'。异步函数的调用不会阻塞后面的代码，虽然await阻塞了异步函数内部即await后面的代码。

那Promise 和Async await有什么区别或者什么时候该用哪个？有没有执行顺序的要求，比如说需不需要等待某个异步执行的结果，如需要，我们可以使用Async await的语法。另外 Async/await 避免繁冗的回调函数，而且比起Promise的链式调用，Async/await 的代码更简便以及易读易懂。

function te(){
    return new Promise(function(resolve, reject){
        setTimeout(() => 
            resolve('from te ')
        , 2000);
    });
} 

async function ta(){
    return await new Promise(function(resolve, reject){
        setTimeout(() => 
            resolve('from ta')
        , 1000);
    });
}
//等待te和ta的异步调用，等te resolve回数据后，才继续调用ta的，同样等待ta resolve的执行。
async function asncFn(){
    var result1 = await te();
    var result2 = await ta();
    console.log(result1 + result2); //from te from ta

    return result1 + result2 + ' PV';
}

asncFn().then((re) => 
        console.log('Result is ' + re) //Result is from te from ta PV
    ).catch((e) => 
        console.log('error from ' + e) //error from $(e)
    );
//输出如下：
//from te from ta
//Result is from te from ta PV

//若是te和ta任意一个reject结果，那么catch会捕获错误--------
//比如te函数中，resolve('from te ')替换成reject('from te '), 上述代码的执行输出：
//error from from ta
//但是如果te函数中，加上catch回调函数，先捕获到reject的抛出的错误，那么就不影响asyncFn函数的执行

//说到异常------------
//1，te和ta在resolve执行后抛出异常，不会影响异步函数的执行以及结果;
//只是若是无法被捕获的，会抛出错误，
function te(){
    return new Promise(function(resolve, reject){
        setTimeout(() => {
                resolve('from te ');
                throw('error'); //无法被捕获，直接抛出，不影响异步函数的执行
            }
        , 2000);
    });
} 
//若是能异步函数内部处理会被忽略，不抛错也不被catch或error回调捕获。
function te(){
    return new Promise(function(resolve, reject){
        resolve('from te ');
        throw('error'); //被忽略，不影响异步函数的执行
    });
}
//2，将1中的代码的resolve和throw语句调换以下位置
//结果会变成这样：
//第一个抛出错误，异步函数受影响停止执行；
//第一个异常被catch捕获，异步函数内之后代码都受到影响停止执行；
//只是第一个的影响是全局性的，第二个的影响是局部性的。

3，注意：下面两个函数的功能是一样的：

function fnPromise(){
    return new Promise(function(resolve){
        resolve(true);
    });
}

async function fnAsync(){
    var re = await fnPromise();
    return re; //相当于resolve回一个数值re;
}
//以上两个函数实现一样的功能。
var promise1 = fnPromise();
var promise2 = fnAsync();

4，其他文档

async await/promise简单例子