async-await

1:异步函数的简单写法

1 async function foo1(){
2 
3 }
4 const foo2=async()=>{
5 
6 }
7 class Foo{
8     async bar()
9 }

2：异步函数的执行流程

！如果没有什么特殊的操作：会按照普通函数按顺序执行

！三种返回值：类似于resolve参数

 1 //按顺序依次执行
 2 async function foo() {
 3     console.log("foo function start~");
 4     console.log("内部的代码执行1");
 5     console.log("内部的代码执行2");
 6     console.log("内部的代码执行3");
 7     console.log("foo function end~");
 8     //1:返回一个值
 9     // return 1 //结果为1
10 
11 
12     //2:返回thenable
13     // return {
14     //     then: function(resolve, reject) {
15     //         resolve('hahahha') //结果为hahahha
16     //     }
17     // }
18 
19 
20     //3:返回Promise
21     return new Promise((resolve, reject) => {
22         setTimeout(() => {
23             resolve("xiixi")
24         }, 1000)
25     })
26 
27 
28 }
29 foo().then(res => {
30         console.log(res);
31     })

需要注意的是：函数一定要return 值否则是undefined

3：异步函数和普通函数的区别

①：异步函数的返回值一定是Promise

 1 async function foo() {
 2     console.log("foo function start~");
 3     console.log("内部的代码执行1");
 4     console.log("内部的代码执行2");
 5     console.log("内部的代码执行3");
 6     console.log("foo function end~");
 7     //1:返回一个值
 8     return 1 //结果为1
 9 const promise = foo()
10 promise.then(res => {
11     console.log(res);
12 })

②：关于抛出异常，普通函数抛出异常后之后的代码不会执行，但是异步函数会执行

 1 function foo1() {
 2     console.log("foo function start~");
 3     console.log("中间代码");
 4     throw new Error("普通函数的异常")
 5     console.log("foo function end~");
 6 }
 7 async function foo2() {
 8     console.log("foo function start~");
 9     console.log("中间代码");
10     //异步函数中的异常，会被作为异步函数返回的Prmonise的reject的值
11     throw new Error("异步函数的异常")
12     console.log("foo function end~");
13 }
14 foo1()
15 foo2().catch(res => {
16         console.log(res);
17     })
18     //普通函数不会执行 异步函数会执行
19 console.log("后续还有代码");

4：async中使用await

await 后面一般跟上表达式(表达式返回Promise ,也可以是值（普通值、thenable、Promise）---直接看例子

 1 // //await跟上表达式
 2 function requestData() {
 3     return new Promise((resolve, reject) => {
 4         setTimeout(() => {
 5             reject(222)
 6         }, 2000)
 7     })
 8 }
 9 async function foo() {
10     //一般情况下 后面跟着表达式（表达式返回Promise）
11     const res1 = await requestData()
12     //等到await有结果了才会执行
13     console.log(res1);
14     console.log("----------");
15 
16     const res2 = await requestData()
17     //等到await有结果了才会执行
18     console.log("res2后面的代码");
19 }
20 foo()
21 //2:跟上其他的值 普通的值/thenable/Promise 类似于前面的逻辑
22 async function foo() {
23     const res1 = await 123
24     console.log(res1);
25 }
26 foo()
27 //3:reject值
28 async function foo() {
29     const res1 = await requestData()
30     console.log(res1);
31 }
32 foo().catch(err => {
33     console.log(err);
34 })