es6学习笔记-async函数

释放双眼,带上耳机,听听看~!

1 前情摘要

前段时间时间进行项目开发,需求安排不是很合理,导致一直高强度的加班工作,这一个月不是常说的996,简直是936,还好熬过来了。在此期间不是刚学会了es6的promise,在项目有用到promise的就一直都在用promise,爽的不要不要的,哈哈,项目到了最终阶段,不是很忙了,就开始自己的学习之路,好啦,废话到此为止,开始~

2 含义

关于异步操作,在es6之前,一直都是
回调函数,
事件监听,
发布/订阅
promise对象
(摘自es6的Generator函数的异步应用),这四个为主,再加上es6出来的promise对象以及后来的Generator函数,都可以解决异步编程。es7引入的async函数,使得异步操作变得更加方便

async函数,就是Generator 函数的语法糖,基于Generator 函数而来的,只是为了书写代码时更加流畅,增强代码的可读性。async的返回值就是个promise对象,进一步说,async函数完全可以看作多个异步操作,包装成的一个 Promise 对象,而await命令就是内部then命令的语法糖。

3 基本语法

async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

async function demo(val) {
  let result = await `hello,${val}`;
  return result;
}
demo(\'peter\').then((val)=>{console.log(`${val},哈哈哈哈`)}) // hello,peter,哈哈哈哈
console.log(demo(\'peter\'))  // Promise{<pending>}

上述就是async的最基本语法,这看起来和普通的函数没有什么区别,只是多了两个关键字async和await,以及返回的promise的实例。

  • async
    是异步操作的说明,在普通函数名前面加上async代表了是一个异步操作,async函数返回一个 Promise 对象,async函数return语句返回的值,会成为then方法回调函数的参数
  async function f() {
       return 123
   }
   f().then(v => console.log(v)) // 123

将当于

  async function f() {
      return await new Promise(function(resolve){
          resolve(123)
      })
  }
  f().then(v => console.log(v)) // 123

也将当于

  async function f() {
    return await Promise.resolve(\'123\')
  }
  f().then(v => console.log(v))

将async的return的值作为参数传递给then函数。

  • await
    await 可以理解为是 async wait 的简写。await 必须出现在 async 函数内部,不能单独使用,否则会报错
    function foo() {
       await 123;
    }
    foo(); //Uncaught SyntaxError: await is only valid in async function

这就是没有在函数名前面声明async报的错,相反的,声明了async,没有使用await不会报错

await 后面可以跟任何的JS 表达式。虽然说 await 可以是很多类型的东西,但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。

  • async function foo() {}// 函数声明
  • const foo = async function () {};// 函数表达式
  • let obj = { async foo() {} };
    obj.foo().then(...)// 对象的方法
  • class Foo {// Class 的方法
    constructor() { }
    async foo(name) { }
    }
  • const foo = async () => {};// 箭头函数

如果await的是promise对象会造成异步函数停止执行并且等待promise的解决,如果等的是正常的表达式则立即执行。

另外:await命令后面的 Promise 对象如果变为reject状态,则reject的参数会被catch方法的回调函数接收到。

async function f() {
  await Promise.reject(\'出错了\');
}

f()
.then(v => console.log(v))
.catch(e => console.log(e)) // 出错了

ps: 任何一个await语句后面的 Promise 对象变为reject状态,那么整个async函数都会中断执行。

async function f() {
  await Promise.reject(\'出错了\');
  return await Promise.resolve(\'hello world\');
}
f()
.then(v => console.log(v))
.catch(e => console.log(e)) // 出错了

上述代码在await的时候,实行了promise的reject方法,会直接终端执行,直接实行reject的方法

4 错误处理/异常处理

防止出错的方法,也是将其放在try...catch代码块之中,这样又能实行剩下的部分。

function time(ms){
  if(ms<3000){
    setTimeout(()=>{
      console.log(\'ms\',ms)
      return ms
    },ms)
  }else{
    return Promise.reject(\'出错了\')
  }
}
async function f() {
  try {
    let a = await time(1000)
    let b = await time(2000)
    let c = await time(3000)
  } catch(e) {
    console.log(\'e\',e) // \'e\' 出错了
  }
  return await(\'hello world\');
}
f().then(val=>{
  console.log(val) // hello world
}).catch(val=>{
  console.log(val)
})

先报错‘出错了’,再‘hello world’ 再依次打印出‘1000’,‘2000’
因为有了reject之后,就无法往下进行,但是最后return是返回一个resolve的值给then()

5 注意点

有的注意点上面已经提到了,先总结如下:

  • await 必须出现在 async 函数内部,不能单独使用,否则会报错。
  • await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中,多个await也是如此。
  • 多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发,所谓的继发就是,不相互关联的异步操作,比如第一个异步的返回值给第二个异步这样的例子。

    function time(ms){
      return new Promise((resolve,reject)=>{
        setTimeout(function(){
          resolve()
        },ms)
      })
    }
    async function f() {
      try {
        let a = time(1000)
        let b = time(2000)
        await Promise.all([a,b]); // 不加Promise.all()的话,3s才实行完,加上Promise.all()的话,2s实行完
        console.log(\'~~~\')
      } catch(e) {
        console.log(\'e\',e) // \'e\' 出错了
      }
    }
    f()
  • await必须在async函数的上下文中的作用域中

    //for 循环
    async function a() {
        let arr = [1, 2, 3, 4, 5];
        for (let i = 0; i < arr.length; i ++) {
            await arr[i];
        }
    }
    a();
    // forEach循环
    async function b() {
      let arr = [1, 2, 3, 4, 5];
      arr.forEach(item => {
          await item;
      });
    }
    b();// Uncaught SyntaxError: Unexpected identifier

    原因就是forEach就是一个单独的作用域,会报错。

6 总结

async-await函数就是为了简化异步操作的一种方式,大部分就是结合promise使用,离开不了promise,就像那个并发实行需要使用promise的方法。妥善使用async-await,会给自己对异步操作带来很大的便利,另外,感谢一位博主的文章,让我更快的理解async-await函数。
如果本文有什么不对的地方,欢迎指出,谢谢,大家一起进步加油。我把笔记放到github了,如果满意的话给个star~

参考文献

人已赞赏
随笔日记

【MySQL】当前读、快照读、MVCC

2020-11-9 4:27:04

随笔日记

百亿级大基金频现 债券指基年内揽金超720亿

2020-11-9 4:27:06

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索