JS异步任务队列

https://zhuanlan.zhihu.com/p/41543963
https://juejin.im/post/59e85eebf265da430d571f89#heading-9
https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5be04a8e6fb9a04a072fd2cd

0. Event Loop

console.log('1');

setTimeout(function() {
    console.log('2');
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('3')
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('10')
    }).then(function() {
        console.log('12')
    })
})

await 执行顺序

let a = 0
let b = async () => {
  a = a + await 10
  console.log('2', a) 
}
b()
a++
console.log('1', a)

function testPromise() {
    return new Promise(resolve => {
        resolve('promise')
    })
}

async function asyncFn() {
    let res = await testPromise()
    console.log(res)
}

asyncFn()

console.log('script end')

function testPromise() {
    return 'promise'
}

async function asyncFn() {
    let res = await testPromise()
    console.log(res)
}

asyncFn()

console.log('script end')

Promise.resolve
new Promise(res => res())
function testPromise() {
  return new Promise(resolve => {
        resolve('promise')
  })
}

async function asyncFn() {
    let res = await testPromise()
    console.log(res)
}
new Promise(res => res('xxx'))
.then(res => console.log(res))
asyncFn()
console.log('script end')

async function asyncFn() {
    console.log('asyncFn')
    let res = await asyncFn2()
    console.log(res)
}

async function asyncFn2() {
    console.log('asyncFn2')
    let res = await fn3()
    console.log(res)
    return 'asyncFn2 return'
}

function fn3() {
    console.log('fn3')
}

setTimeout(() => {
    console.log('setTimeout')
}, 0)

console.log('script start')

asyncFn()

let promise = new Promise(resolve => {
    console.log('promise')
    resolve('promise resolved')
    console.log('after promise resolved')
}).then(res => {
    console.log(res)
})

console.log('script end')

对于以上代码你可能会有疑惑，让我来解释下原因

首先函数 b 先执行，在执行到 await 10 之前变量 a 还是 0，因为 await 内部实现了 generator ，generator 会保留堆栈中东西，所以这时候 a = 0 被保存了下来
因为 await 是异步操作，后来的表达式不返回 Promise 的话，就会包装成 Promise.reslove(返回值)，然后会去执行函数外的同步代码
同步代码执行完毕后开始执行异步代码，将保存下来的值拿出来使用，这时候 a = 0 + 10
上述解释中提到了 await 内部实现了 generator，其实 await 就是 generator 加上 Promise 的语法糖，且内部实现了自动执行 generator。如果你熟悉 co 的话，其实自己就可以实现这样的语法糖。