async 前端异步编程的终结

    

前端发展到现在出现了许多异步编程的方式：promise、generator到现在在ES7当中终于要终结了（别更新了，老子学不动了）ES7当中推出了async 这个终极大杀器。

如果不懂promise的同学请走 promise 这个传送门，不懂generator 的同学走 generator 传送门。具体点来说 promise 的出现并不是真正意义上异步编程，而是一种为了避免 “回调地狱”而出现的技术.

api .get ( '/data.text' , function (){

  api .get ( '/data.text' , function (){

    api .get ( '/data.text' , function (){

      api .get ( '/data.text' , function (){

       })

     })

   })

})

看起来是不是很可怕。在promise当中 

let promise = new Promise ( function (resolve , reject ) {

  api .get ( '/data.text' , function (){

     if ( true ) {

      resolve (value )

     } else {

      reject (value )

     }

   })

})

promise .then ( function (value ){

  api .get ( '/data.text' , function (){

     if ( true ) {

      resolve (value )

     } else {

      reject (value )

     }

   })

}, function (value ) {

}).then ( function (value ) {

}, function (value ) {

  

})

是不是看起来结构化一点（个人感觉...emmm就这样吧）但是这不是真正意义上的异步编程啊！！！

在generator 当中 确确实实实现了异步编程 

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

调用的时候使用 hw.next() 会返回一个 {value: 'hello'， done： ‘false’} 对象执行到这里不会继续执行了，除非再调用一次next（）所以从真正意义上来说实现了异步编程了。

也许你想为什么又引入了 async 这是啥子玩意...其实async就是generator一种进化版本，简称 “语法糖”。ES7当中说了这是异步编程的终结（希望是吧）。现在我们重点来比较一下 async和 generator。这两者主要区别在于：

1.generator 执行的时候需要手动调用next（）函数，但是async不需要，在async当中await 会自动执行。

2.generator 定义时候 用 “*”关键字，但是async用 async  关键字

好现在我们来重点介绍async：

   async function getUserByAsync (){

       let user = await fetchUser ();

       return user ;

   }

  getUserByAsync ()

   .then (v => console .log (v ));

  

在这个 async 实例中 getuserByAsync 会返回一个 promise的对象 然后 调用 then()方法 。 执行过程当中 await 会自动执行，不需要手动调用。这时候你可能会疑惑，这玩意和异步编程有毛线联系，请不要着急，我们来慢慢讲.

   const delay = timeout => new Promise (resolve => setTimeout (resolve , timeout ));

   async function f (){

       await delay ( 1000 );

       await delay ( 2000 );

       await delay ( 3000 );

       return 'done' ;

   }

  f ().then (v => console .log (v ));

在这段代码当中需要得到最终的结果需要 6S， 因为这个写法是同步，异步的话需要这样写

const delay = timeout => new Promise (resolve => setTimeout (resolve , timeout ));

async function f (){

let await1 = await delay ( 1000 );

let await2 = await delay (2 000 );

let await3 = await delay (3 000 );

        

      await1 ;

      await2 ;

await3 ;

return 'done' ;

}

f ().then (v => console .log (v ));

  

await 后面可以跟任意的函数，所以这段代码执行的时间 3S。

下面是大神写的：

async 函数返回一个 Promise 对象

async 函数内部 return 返回的值。会成为 then 方法回调函数的参数。

async function  f() {
    return 'hello world'
};
f().then( (v) => console.log(v)) // hello world

如果 async 函数内部抛出异常，则会导致返回的 Promise 对象状态变为 reject 状态。抛出的错误而会被 catch 方法回调函数接收到。

async function e(){
    throw new Error('error');
}
e().then(v => console.log(v))
.catch( e => console.log(e));

async 函数返回的 Promise 对象，必须等到内部所有的 await 命令的 Promise 对象执行完，才会发生状态改变

也就是说，只有当 async 函数内部的异步操作都执行完，才会执行 then 方法的回调。

const delay = timeout => new Promise(resolve=> setTimeout(resolve, timeout));
async function f(){
    await delay(1000);
    await delay(2000);
    await delay(3000);
    return 'done';
}

f().then(v => console.log(v)); // 等待6s后才输出 'done'

正常情况下，await 命令后面跟着的是 Promise ，如果不是的话，也会被转换成一个 立即 resolve 的 Promise
如下面这个例子：

async function  f() {
    return await 1
};
f().then( (v) => console.log(v)) // 1

如果返回的是 reject 的状态，则会被 catch 方法捕获。

Async 函数的错误处理

async 函数的语法不难，难在错误处理上。
先来看下面的例子：

let a;
async function f() {
    await Promise.reject('error');
    a = await 1; // 这段 await 并没有执行
}
f().then(v => console.log(a));

如上面所示，当 async 函数中只要一个 await 出现 reject 状态，则后面的 await 都不会被执行。
解决办法：可以添加 try/catch。

// 正确的写法
let a;
async function correct() {
    try {
        await Promise.reject('error')
    } catch (error) {
        console.log(error);
    }
    a = await 1;
    return a;
}

correct().then(v => console.log(a)); // 1

如果有多个 await 则可以将其都放在 try/catch 中

文章灵感来源于：

一峰大神的 es6 入门

超哥的  理解 async/await

dalao 手下留情！