JavaScript-EventLoop+Promise+Aync/Await

JavaScriptのEventLoopを習いました.そしてPromiseとAync/Awaitを混ぜて、ここでまとめます.

は全部で三つの列に分けられます.第一はマクロタスクキュー、第二はマイクロタスクキュー、第三はプロcess.nextTickのために作成されたキュー

です.

の3つの列の実行順序は -->nextTick--> であり、その後、継続的に

を循環する.

一般的な文、例えばconsone、関数とnewのPromiseの中の文、await修飾の文はマクロキュー

に置く.

Promiseのthen,await修飾文の後の文はマイクロキューに置かれています.環境によってはthenとawaitの順番が異なります.ブラウザ環境ではフラットレベルで、node環境ではthenが優先されます.

process.nextTick内のステートメントは、専属キュー

に配置されています.

setTimeout、set Intervalは、指定された時間の後に内部文を次のループに置くマクロタスクキュー

の役割を果たす.

以上のPromise後のthenは、マイクロキュー

に交互に追加される.

new Promise(resolve => {
    console.log(1)
    resolve()
}).then(()=>{
    console.log(2)
}).then(()=>{
    console.log(3)
})
new Promise(resolve => {
    console.log(4)
    resolve()
}).then(()=>{
    console.log(5)
}).then(()=>{
    console.log(6)
})

出力

1
4
2
5
3
6

async/awaitを理解する

async function fun() {
    await console.log(1)
    console.log(2)
}
fun()
 
new Promise(resolve => {
    console.log(1)
    resolve()
}).then(()=>{
    console.log(2)
})

setImmediateは、setTimeout(…、0)とすぐに次のマクロキューにステートメントを入れることを表していますが、両者の順序はまだ検討されています.完全ランダム

ではありません.

        setImmediate setTimeout    ，         
setImmediate(function A() {
    console.log(1);
    setImmediate(function B(){
        console.log(2);
        process.nextTick(function () {
            console.log('nextTick');
        });
        setTimeout(function t1() {
            console.log('t1');
        })
    });
});
setTimeout(function t2() {
    console.log('t2');
    setTimeout(function t3() {
        console.log('t3');
    });
    setTimeout(function t4() {
        console.log('t4');
    });
}, 0);

    setImmediate   setTimeout  
async function async1() {
    console.log("async1 start");
    await  async2();
    console.log("async1 end");
}
async  function async2() {
    console.log( 'async2');
}
console.log("script start");

async1()
new Promise(function (resolve) {
    console.log("promise1");
    resolve();
}).then(function () {
    console.log("promise2");
});

process.nextTick(()=>{
    console.log("process")
})
console.log('script end');
setImmediate(()=>{
    console.log("setImmediate")
})
setTimeout(()=>{
    console.log("settimeout");
},0)

大家さんの解惑をお願いします.

async function async1() {
    console.log("async1 start");
    await  async2();
    console.log("async1 end");
}
async  function async2() {
    console.log( 'async2');
}
console.log("script start");

async1()
new Promise(function (resolve) {
    console.log("promise1");
    resolve();
}).then(function () {
    console.log("promise2");
});

process.nextTick(()=>{
    console.log("process")
})
console.log('script end');
setImmediate(()=>{
    console.log("setImmediate")
})
setTimeout(()=>{
    console.log("settimeout");
},0)

キュー実行start第1ラウンド:
current task:「script start」、「async 1 start」、「async 2」、「promise 1」、「script end」micro task queue:[async,promise.then,process]macro task queue:
第2ラウンド
current task:process、async 1 end、promise.then micro task queue:[]macro task queue:[set Timeout、set Immedite]
第3ラウンド
current task:set Timeout,set Immediate micro task queue:[]macro task queue:[]
最終結果:[script start,async 1 start,async 2,promise 1,script end,process,async 1 end,promise 2,set Timeout,setImmedite]
「async 1 end」「promise 2」の優先度は、プラットフォームによって異なります.
詳細https://juejin.im/post/5c9a43175188252d876e5903?utm_source=gold_browser_extension菵headingn-5