从一个休眠函数了解promise、async、await(下)

async

js 有很多异步处理的方案，这其中，async 绝对是一颗闪亮的星。它可以把一个 function 搞成异步的。这样做的好处就是你可以在这个异步函数里面写同步的代码。

解决了什么问题

我们还是以休眠函数举例，如果不使用 async ，请问怎样实现这样一个休眠函数？是不是只能把 console.log('有了res之后我才执行的'); 放到 .then 里面？

function sleep(time) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(222);
        }, time);
    });
}

async function fn() {
    console.log('1111', 1111);
    const p = sleep(3000);
    p.then(res => {
        console.log('res', res);
        console.log('有了res之后我才执行的');
    })
}

对比一下使用 async 是不是肉眼可见的差距？

async function fn() {
    console.log('666', 666);
    let res = await sleep(3000);
    console.log('res', res);
    console.log('有了res之后我才执行的');
}

假如还有一个需求，我有三个后端接口，耗时不定，我想按照请求顺序分别打印出他们的返回值，然后再去做一些事情，这个时候是不是还得好好想一想？但是如果使用 async 就秒解

var p1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 200, 1);
});
var p2 = new Promise((resolve, reject) => {
    resolve(2)
});
var p3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 300, 3);
});

async function fn() {
    let res1 = await p1;
    console.log('res1', res1);
    let res2 = await p2;
    console.log('res2', res2);
    let res3 = await p3;
    console.log('res3', res3);
}

fn() // 1 , 2 , 3

很明显，p2 耗时是最短的， p1 次之， p3 最慢，但是没办法，就是这么霸道，你必须按照我想要的顺序来，这是规矩！！！

所以我个人认为 async、await 最 nb 的地方就是能够把 异步代码转成同步代码写

特点

async 的语法就是在函数开头加一个关键字 async

  async function fn() {
  return 1;
  }

  // 箭头函数的话也是一样的
        function fn1() {
          return async () => {
              let res1 = await p1;
              console.log('res1', res1);
          }
      }

• 函数数开头加一个 async 关键字就表明说这个函数里面有异步，那么异步的东西是什么呢？ 其实就是个 Promise 就算你不写异步，你 return 个数字或者是字符串，它都会封装一下，让你 return 的东西出现在一个 Promise 的 resolve() 里面，就是这么刚！

      async function getData_1() {
          return '100'
      }
  
      function getData_2() {
          return new Promise((resolve, reject) => {
              setTimeout(() => {
                  resolve('200')
              }, 2000)
          })
      }
  
      function fn() {
  
          const data_1 = getData_1();
          console.log('data_1', data_1);
  
          const data_2 = getData_2();
          console.log('data_2',data_2);
      }
  
      fn();
  

  

  getData_1 就是一个普通的再普通不过的函数了，但是只要加一个 async ，立马让你脱胎换骨！

  然后我们再看输出

  async function fn() {
  
      const data_1 = await getData_1();
      console.log('data_1', data_1);
  
      const data_2 = await getData_2();
      console.log('data_2', data_2);
  }
  
  fn();
  

  

• await 啥都能等!! 刚刚的 getData_1 函数前面即使不声明 async ，使用 await 也是可以的

  function getData_1() {
  return '100'
  }
  
  function getData_2() {
      return new Promise((resolve, reject) => {
          setTimeout(() => {
              resolve('200')
          }, 2000)
      })
  }
  
  async function fn() {
      const data_1 = await getData_1();
      console.log('data_1', data_1);
      const data_2 = await getData_2();
      console.log('data_2', data_2);
  }
  
  fn(); 
  // data_1 100
  // data_2 200
  

  • 如果等到的是 promise ， 它就把 promise 的 resolve 的参数返回
  • 如果等到的是 普通东西，那么就 直接返回 这个东西

• async 一般不单独使用，而是和 await 一起使用，一个 async 函数里面可以有多个 await (上面的案例里面就是)

• await 不能 单独使用，必须配合 async 才能使用

  反正就是 async 可以没有 await 但 await 不能没有 async ！！！

• await 只能等待promise 的 resolve，reject 是等不到的！！！这个时候就需要 try...catch 来捕获 reject 的情况以及值。这个上一篇文章已经写过了，请移步这儿

注意

async 虽好，但不要滥用哦，尽管 await 能让我们的代码看起来同步化，但是它们仍然是异步的，而且 await 会导致函数 串行执行，这样的话，执行时间也会比并行执行长。 await 使用不当会引起 阻塞，从而影响到代码的性能