asyne和await

async await

async

• ES7 提出的async 函数，终于让 JavaScript 对于异步操作有了终极解决方案

async 本身是一个语法糖
语法糖: 带有一定功能的关键字.

• async 写在函数的前面，那么该函数叫做 async 函数。用于表示函数是一个异步函数，且该函数的执行不会阻塞后面代码的执行。

  • 作用：为了解决大量复杂不易读的Promise异步的问题。

  • 功能: 创建并返回一个 promise 实例，在函数内部使用 await 来表示异步。

  • 这个功能引出问题：async 函数中 return 值去哪儿了？如何接受？

• Q1：async 函数中 return 值去哪儿了？如何接受？

  • async 函数中的 return 值，在 async 函数返回的promise 实例内，具体的是 preomise.[[PromiseValue]] 的值

// 因为在 foo 函数之前添加了 async 关键字，所以此时 foo 函数变成了 async 函数
async function foo (p){

    console.log('foo run',p);   // foo run 1

    return 1
}

// res 用来接收 foo 函数的返回值
var res = foo(1);

console.log(res);   // Promise { <state>: "fulfilled", <value>: 1 }

执行结果

foo run 1
Promise { <state>: "fulfilled", <value>: 1 }

• Q2：async 函数中 return 值如何接收？

  • async 函数中的 return 值，可以通过 promise.then-callback 形参获取

console.log(1111);

async function foo(){

    console.log(2222222222222);

    return 123

}

// res 是一个 promise 实例
let res = foo();

console.log(333333333333333);

// 通过 promise.then-callback 形参获取
// 即 async 函数的 return 值 成为 promise.then 方法中 callback 的形参
res.then(data=>{

    console.log(data);

})

执行结果

1111 
2222222222222 
Promise { <state>: "fulfilled", <value>: 123 }
333333333333333 
123

await

• await 是等待，需注意：
  • 1、await 需要在async中写；
  • 2、await 右侧跟的是 promise 实例；
  • 3、await 作用 获取 promise.[[PromiseValue]] 的值
  • 4、作用：为了解决大量复杂不易读的Promise异步的问题。

async 和 await 的相关知识点

计划会修改

• 1、async 作为一个关键字放到函数的前面，用于表示函数是一个异步函数，该函数的执行不会阻塞后面代码的执行。
• 2、async 声明的函数的返回本质上是一个 Promise，async 函数内部会返回一个Promise对象，then 方法回调函数的参数。
• 3、await的本质是可以提供等同于同步效果的等待异步返回能力的语法糖，用await声明的Promise异步返回，必须“等待”到有返回值的时候，代码才继续执行下去。
• 4、async 函数内部的实现原理是 resolved，如果函数内部抛出错误， 则会导致返回的 Promise 对象状态变为 reject 状态，promise 对象有一个catch 方法进行捕获，被 catch 方法回调函数接收到。
• 5、async 必须声明的是一个 function，await 就必须是在这个 async 声明的函数内部使用，必须是直系，作用域链不能隔代，在后面放一个返回 promise 对象的表达式。
• 6、函数的错误处理，当 async 函数中只要一个 await 出现 reject 状态，则后面的 await 都不会被执行,可以添加 try/catch。