JS中的async/await的用法和理解

1、首先需要理解async 和 await的基本含义

async 是一个修饰符，async 定义的函数会默认的返回一个Promise对象resolve的值，因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数

1. // 0. async基础用法测试

3. async function fun0() {

4. console.log(1)

5. return 1

6. }

7. fun0().then( x => { console.log(x) }) // 输出结果 1， 1，

10. async function funa() {

11. console.log('a')

12. return 'a'

13. }

15. funa().then( x => { console.log(x) }) // 输出结果a， a，

18. async function funo() {

19. console.log({})

20. return {}

21. }

23. funo().then( x => { console.log(x) }) // 输出结果 {} {}

25. async function funp() {

26. console.log('Promise')

27. return new Promise(function(resolve, reject){

28. resolve('Promise')

29. })

30. }

32. funp().then( x => { console.log(x) }) // 输出promise promise

await 也是一个修饰符，

await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
// 如果await 后面并不是一个Promise的返回值，则会按照同步程序返回值处理

1. // await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值

2. // 如果await 后面并不是一个Promise的返回值，则会按照同步程序返回值处理,为undefined

3. const bbb = function(){ return 'string'}

5. async function funAsy() {

6. const a = await 1

7. const b = await new Promise((resolve, reject)=>{

8. setTimeout(function(){

9. resolve('time')

10. }, 3000)

11. })

12. const c = await bbb()

13. console.log(a, b, c)

14. }

16. funAsy() // 运行结果是 3秒钟之后 ，输出 1， time , string,

1. // 2.如果不使用promise的方法的话

3. function log2(time) {

4. setTimeout(function(){

5. console.log(time)

6. return 1

7. }, time)

8. }

10. async function fun1() {

11. const a = await log2(5000)

12. const b = await log2(10000)

13. const c = log2(2000)

14. console.log(a)

15. console.log(1)

16. }

18. fun1()

20. // 以上运行结果为： 立刻输出undefined 立刻输出1 2秒后输出2000 5秒后输出5000 10秒后输出10000

 

2、那么由此看来async / await的综合用法如下 

1. // 1.定义一个或多个普通函数，函数必须返回Promise对象，如果返回其他类型的数据，将按照普通同步程序处理

3. function log(time) {

4. return new Promise((resolve, reject)=> {

5. setTimeout(function(){

6. console.log(time)

7. resolve()

8. }, time)

9. })

10. }

12. async function fun() {

13. await log(5000)

14. await log(10000)

15. log(1000)

16. console.log(1)

17. }

19. fun()

 

 

1. // 3. async / await的重要应用

3. const asy = function(x, time) {

4. return new Promise((resolve, reject) =>{

5. setTimeout(()=>{

6. resolve(x)

7. }, time)

8. })

9. }

11. const add = async function() {

12. const a = await asy(3, 5000)

13. console.log(a)

14. const b = await asy(4, 10000)

15. console.log(b)

16. const c = await asy(5, 15000)

17. console.log(a,b,c)

18. const d = a + b +c

19. console.log(d)

20. }

22. add();

24. // 5秒后输出3 又10秒后输出4 又15秒后输出5 然后立刻输出3,4,5，然后输出12