es6 async await 常规使用

发表于 JS 分类，标签:
21 02月 2022
0

版本信息

作者时间主要变更内容链接
吴惟刚2022/02/21async awaithttp://wuweigang.com/?id=363

概述

说一下 async , await 函数的简单应用， 用最简单的示例，让复杂的事变得更简单。

记住以下知识，项目中基本够用

示例

以下示例，大家可以直接复制粘贴到浏览器的console面板测试，方便大家理解。

示例1 - 最简单的async 函数

1
2
3
4
5
6
7
8
9
10
11
// async 关键词，创建的函数就是异步函数
async function asyncFn () {
    console.log('2')
    return  4;
}
 console.log('1');
 asyncFn().then((data)=> {
      console.log('这就是异步函数返回的结果')
      console.log(data);
 })
 console.log('3');

输出结果

1
2
3
4
5
1
2
3
这就是异步函数返回的结果
4

示例2 - await 函数

1
2
3
4
5
6
7
8
9
10
11
function test(){
  return new Promise((resolve) => {
    setTimeout(() => {    console.log('异步函数test:2'); resolve(2)}, 100)
  })
}
console.log(1)
console.log('100ms后')
console.log('\n')

await test()
console.log(3)

输出结果

1
2
3
4
5
1
100ms后

异步函数test:2
3

tips：

  • chrome 98.0.4758.82（正式版本） （64 位） : await 可以脱离 async单独使用，并且生效

  • operate 83.0.4254.27 ： await 可以脱离 async单独使用，并且生效

  • edge 版本 98.0.1108.56 (官方内部版本) (64 位): await 可以脱离 async单独使用，并且生效

  • 搜狗 11.0.1.34551： await 可以脱离 async单独使用，并且生效

  • 360极速13.0.2290.0： await 可以脱离 async单独使用，并且生效

  • safari 5.1.7 (7534.57.2): 不支持直接写 async 语法

  • 火狐45.9.0： 不支持直接写 async 语法

  • ie11: 不支持直接写 async 语法

总体来说，只要支持 async, await 语法的浏览器，上述代码都可直接使用，所以await 可单独使用，但是不建议这么干，还是跟async 配合比较好

示例3 async + await 同步代码

注意2和4的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
// async 关键词，创建的函数就是异步函数
async function asyncFn () {
    console.log('2')
    const a = await 5;
    console.log('4')
    return  a;
}
 console.log('1');
 asyncFn().then((data)=> {
      console.log('这就是异步函数返回的结果')
      console.log(data);
 })
 console.log('3');

输出结果

1
2
3
4
5
6
1
2
3
4
这就是异步函数返回的结果
5

注意上面的代码， 2和4中间增加了一个 await ， 起到的作用就是 4在3后面输出，

tips: 一般 await后面是跟异步函数， 但是也可以直接跟同步代码, 但是await 仍然是异步效果

示例4 async + await promise

1
2
3
4
5
6
7
8
9
10
11
12
13
// async 关键词，创建的函数就是异步函数
async function asyncFn () {
    console.log('2')
    const a = await new Promise((resolve) => {  setTimeout(() => {resolve(5)}, 100)});
    console.log('4')
    return  a;
}
 console.log('1');
 asyncFn().then((data)=> {
      console.log('这就是异步函数返回的结果')
      console.log(data);
 })
 console.log('3');

输出结果

1
2
3
4
5
6
7
1
2
3

4
这就是异步函数返回的结果
5

结果和示例2一样， 值得注意的是，这里有100ms的延迟，才会输入4，5

示例5 async + 多个 await promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// async 关键词，创建的函数就是异步函数
async function asyncFn () {
    console.log('2')
    const a = await new Promise((resolve) => {  setTimeout(() => {    console.log('异步函数a:4'); resolve(4)}, 100)});
	console.log('同步代码：5') 
    console.log('\n') 
    const b = await new Promise((resolve) => {  setTimeout(() => {console.log('异步函数b:6') ;resolve(6)}, 100)});
    console.log('同步代码：7')
    console.log('\n') 
    return  a + '--'+ b;
}
 console.log('1');
 asyncFn().then((data)=> {
      console.log('这就是异步函数返回的结果')
      console.log(data);
 })
 console.log('3');

输出结果

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3

异步函数a:4
同步代码：5

异步函数b:6
同步代码：7

这就是异步函数返回的结果
4--6

tips: 有await的地方， 后面的代码一定会等await完事，才会往下执行

示例6 async + 多个 await promise, 异常发生报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// async 关键词，创建的函数就是异步函数
async function asyncFn () {
  console.log('2')
  if ( Math.random()> 0.5){
    throw new Error('【同步代码出错】')
  }
  const a = await new Promise((resolve,reject) => {  setTimeout(() => {    console.log('异步函数a:4'); Math.random() > 0.5 ?resolve(4): reject(new Error('异步函数a出错'))}, 100)});
  console.log('同步代码：5')
  console.log('\n')
  const b = await new Promise((resolve,reject) => {  setTimeout(() => {console.log('异步函数b:6') ;Math.random() > 0.5 ?resolve(6): reject(new Error('异步函数b出错'))}, 100)});
  console.log('同步代码：7')
  console.log('\n')
  return  a + '--'+ b;
}
console.log('1');
asyncFn().then((data)=> {
  console.log('这就是异步函数返回的结果')
  console.log(data);
}, (errorData)=> {
  console.log('异步函数失败返回的结果');
  console.log(errorData);
})
console.log('3');

输出结果

  • 同步异步都没有出错， 会输出以下结果

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3

异步函数a:4
同步代码：5

异步函数b:6
同步代码：7

这就是异步函数返回的结果
4--6

  • 1、同步出错，会输出以下结果

1
2
3
4
5
6
7
8
1
2
3

异步函数失败返回的结果
Error: 【同步代码出错】
    at asyncFn (<anonymous>:5:11)
    at <anonymous>:16:1

  • 2、异步函数a出错，会输出以下结果

1
2
3
4
5
6
7
8
9
1
2
3

异步函数a:4

异步函数失败返回的结果
Error: 异步函数a出错
    at <anonymous>:7:140

  • 3、异步函数b出错，会输出以下结果

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3

异步函数a:4
同步代码：5

异步函数b:6

异步函数失败返回的结果
Error: 异步函数b出错
    at <anonymous>:10:136

tips: 只要async内部有一个报错，包含同步代码出错 和 await中的promise reject, 执行的代码报错， async都会终止

总结

  • 无论 异步函数写什么， async 函数返回都promise

  • 在支持async, await语法的浏览器上，await 可以单独使用，但建议不要单独使用await 需要配合async 函数

  • 有await的地方， 后面的代码一定会等await完事，才会往下执行

  • 只要async内部有一个报错，包含同步代码出错 和 await中的promise reject, 执行的代码报错， async都会终止


0 篇评论

发表我的评论