ES6新特性之Async

基本概念

Async其实是一个封装了自动化执行并返回一个Promise的Generator函数的语法糖。这句话的意思咱们能够分为三个部分来解读：

• 首先它有一个自动化执行，Generator函数是依靠不停的调用.net来依次执行的，Async有一个自动化执行的过程。

• 第二个，它返回一个Promise，也就是说在Async函数里面咱们拿到它的结果须要调用promise.then。

• Generator函数的语法糖。

  不添加自动化执行脚本的函数：

  function resolveAfter2Seconds(value) {
      return new Promise(resolve => {
          setTimeout(() => {
              resolve(value);
          },2000);
      })
  }
  
  const generator = function* () {
    const value1 = yield resolveAfter2Seconds(1);
    const value2 = yield resolveAfter2Seconds(2);
    console.log(value1);
    console.log(value2);
  };

  Generator自动化执行的脚本：

  function co(generatorFunction){
      return new Promise(function(resolve, reject) {
          const generator = generatorFunction();
          function step(nextF) {
              let next;
              try {
                  next = nextF();
              } catch(e) {
                  return reject(e);
              }
              // 若是遍历已经结束了
              if(next.done) {
                  return resolve(next.value);
              }
              Promise.resolve(next.value).then(function(v) {
                  step(function() {
                      return generator.next(v);
                  });
              },function(e) {
                  step(funciton() {
                      return generator.throw(e);
                  });
              });
          }
          step(function() {
              return generator.next(undefined);
          });
      });
  }
  
  co(generator);
  /*
  (4s后)
  1
  2
  */
  
  
  const async = async function () {
    const value1 = await resolveAfter2Seconds(1);
    const value2 = await resolveAfter2Seconds(2);
    console.log(value1);
    console.log(value2);
  };
  async().then(res => {
    console.log(res);
  })
  
  /*
  (4s后)
  1
  2
  */
  
  async function asyncFunc() {};
  const asyncFunc = async function () {};
  const asyncFunc = async () => {};
  const obj = {
    async asyncFunc() {}
  }

语法

• 首先，最重要的一点是它返回一个Promise对象，也就是说，在Async里面，在它后面咱们想要获得函数的执行结果，必须使用一个.then()。

  async function asyncGun() {
      return 'Eric';
  }
  
  asyncFunc().then(value => console.log(value));
  // Eric

• 第二个，await遇到了一个非Promise，直接返回：

  async function asyncFunc(){
      return await 'Eric';
  }
  
  asyncFunc().then(value => console.log(value));
  // Eric

• thenable（带有then方法的一个函数）对象等同于Promise。

  class Thenable {
      constructor(timeout) {
          this.timeout = timeout;
      }
      then(resolve, reject) {
          setTimeout{
              () => resolve('resolve'),
              this.timeout
          };
      }
  }

• Async函数任何一个await返回reject，那么就会致使整个Async的中断执行。

  promise.all（），只有当它内部全部的子promise所有reslove时，整个promise才会resolve，只要有一个reject，那么整个promise.all就会reject，aysnc一样的原理。

注意事项

• 尽可能使用try...catch代码块，由于一旦用到了Async，显然这个场景确定是有多个不方便操做的，这个时候为了防止中间出错，最好使用一个try...catch 的代码块，而后在catch代码块的内部加上咱们的一些备用数据。

• 非继发的await同时执行，继发就是一个接一个也就是前面一个函数的输出是后面一个函数的输入，相似于函数式编程里面的compose。 对于继发的咱们没有办法只能等待前面的操做完再去执行后续操做。

  function resolveAfter2Seconds(value){
      return new Promise(resolve => {
        setTimeout(() => {
              resolve(value);
        },2000);
      });
  };
  
  const async = async function(){
      const value1 = await resolveAfter2Seconds(1);
      const value2 = await resolveAfter2Seconds(2);
      console.log(value1);
      console.log(value2);
  };
  async().then(res => {})
  // 4s 后输出
     1
     2

  怎么样才能让二者同步执行，能够有两种办法。 第一种，使用Promise.all()将它封装起来：

  function resolveAfter2Seconds(value){
      return new Promise(resolve => {
          setTimeout(() => {
              resolve(value);
          },2000);
      });
  }
  
  const async = async function() {
      const [value1,value2] = await Promise.all([resolveAfter2Seconds(1), resolveAfter2Seconds(2)])
      console.log(value1);
      console.log(value2);
  };
  async().then(res => {});
  // 2s后输出
     1
     2

  第二种，先执行再await，也就是把异步的一个操做赋值给一个变量：

  function resolveAfter2Seconds(value){
      return new Promise(resolve => {
          setTimeout(() => {
              resolve(value);
          },2000);
      });
  }
  
  const async = async function() {
      const vpromise1 = resolveAfter2Seconds(1);
      const vpromise2 = resolveAfter2Seconds(2);
      const value1 = await vpromise1;
      const value2 = await vpromise2;
      console.log(value1);
      console.log(value2);
  }
  async().then(res => {});
  // 2s 后输出
     1
     2