|
|
@@ -0,0 +1,124 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ 1.进入到 async1,发现同步任务，输出'async1 start'
|
|
|
+ 2.遇到了await,进入到async2,碰到定时器,加入到异步队列里面的宏任务
|
|
|
+ 3.在async2 有一个同步任务 直接输出'async2'
|
|
|
+ 4.由于await 阻塞了后面代码的执行 将后面的代码加入微任务 所以向下去找
|
|
|
+ 5.碰到了定时器 加入到宏任务里
|
|
|
+ 6.碰到同步任务 输出'start'
|
|
|
+ 7.同步代码执行完毕 先执行微任务
|
|
|
+ 8.先输出微任务里面的 同步任务 输出'async1 end'
|
|
|
+ 9.微任务里面有定时器 加入到宏任务里
|
|
|
+ 10.微任务执行完毕 执行宏任务
|
|
|
+ 11.宏任务队列里面有3个任务
|
|
|
+ 12.按照顺序执行 timer2=>timer3=>timer1
|
|
|
+
|
|
|
+
|
|
|
+ async 函数
|
|
|
+ 1.函数返回值返回Promise对象
|
|
|
+ 2.Promise对象结果由async里面的返回值决定
|
|
|
+
|
|
|
+ await函数
|
|
|
+ 1.必须写在async里面
|
|
|
+ 2.如果遇到await函数 函数后面的代码会被阻止 加入微任务队列里面
|
|
|
+
|
|
|
+ <script>
|
|
|
+ /* async function timeout(){
|
|
|
+ // throw new Error('rejected')
|
|
|
+ return 'hello word'
|
|
|
+ }
|
|
|
+ timeout().then(val =>{
|
|
|
+ console.log(val)
|
|
|
+ })
|
|
|
+
|
|
|
+ // console.log(timeout())
|
|
|
+ console.log(1111) */
|
|
|
+
|
|
|
+
|
|
|
+ /* await 方法 会阻塞函数内部处于它后面的代码 */
|
|
|
+ /* async function fn1(){
|
|
|
+ console.log(1)
|
|
|
+ await fn2()
|
|
|
+ console.log(2)//加入微任务队列
|
|
|
+ }
|
|
|
+ async function fn2(){
|
|
|
+ console.log('fn2')
|
|
|
+ }
|
|
|
+ fn1()
|
|
|
+ console.log(3) */
|
|
|
+
|
|
|
+
|
|
|
+ /* async function async1() {
|
|
|
+ console.log('async1 start')
|
|
|
+ await async2()
|
|
|
+ console.log('async1 end')
|
|
|
+ setTimeout(() => {
|
|
|
+ console.log('timer1')
|
|
|
+ }, 0)
|
|
|
+ }
|
|
|
+ async function async2() {
|
|
|
+ setTimeout(() => {
|
|
|
+ console.log('timer2')
|
|
|
+ }, 0)
|
|
|
+ console.log('async2')
|
|
|
+ }
|
|
|
+ async1()
|
|
|
+ setTimeout(() => {
|
|
|
+ console.log('timer3')
|
|
|
+ }, 0)
|
|
|
+ console.log('start') */
|
|
|
+
|
|
|
+ /* await function fn2(){
|
|
|
+ console.log(2)
|
|
|
+ }
|
|
|
+ fn2() */
|
|
|
+
|
|
|
+
|
|
|
+ /* async function fn1(){
|
|
|
+ console.log(333)
|
|
|
+ await fn2()
|
|
|
+ console.log(111)
|
|
|
+ }
|
|
|
+ async function fn2(){
|
|
|
+ throw new Error('rejected')
|
|
|
+ }
|
|
|
+ fn1()
|
|
|
+ console.log(2222) */
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ async function fn1(){
|
|
|
+ console.log(1)
|
|
|
+ await fn2()
|
|
|
+ console.log(2)
|
|
|
+ setTimeout(()=>{
|
|
|
+ console.log(3)
|
|
|
+ },0)
|
|
|
+ }
|
|
|
+ async function fn2(){
|
|
|
+ console.log(4)
|
|
|
+ await fn3()
|
|
|
+ console.log(5)
|
|
|
+ }
|
|
|
+ async function fn3(){
|
|
|
+ setTimeout(()=>{
|
|
|
+ console.log(6)
|
|
|
+ },0)
|
|
|
+ }
|
|
|
+ fn1()
|
|
|
+ console.log(7)
|
|
|
+ //1475263
|
|
|
+ //1472563
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
zsydgithub