async/await実行手順詳細

async/awaitが正式にES 7の基準に組み入れられるにつれて、非同期プログラムの最終的な解決策といわれるasync/awaitを研究する人が増えてきました.しかし、多くの人がこの方法の内部をどうやって実行しているかはよく分かりません.今回は技術ブログを見て、JavaScriptのasync/await(async/awaitに慣れていないなら、先にこの文章を見てもいいです.)を理解して、awaitの後、jsの実行手順を理解しました.

async/awaitは、非同期コードを作成する新しい方法です.前の非同期コードの案はリプライとプロミスです.

async/awaitはpromiseに基づくものです.

async/awaitはpromiseのようにブロックされていません.

async/awaitは、非同期コードを見て、より同期コードのように表現する.これはまさにその威力です.

asyncはどうやって返しますか?

async function testAsync() { return "hello async"; } let result = testAsync(); console.log(result)

出力結果:

Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "hello async"}

その結果、async関数が戻ってくるのはpromiseオブジェクトです.関数の中でreturnの直接量があれば、asyncはこの直接量をPromise.resove()を通じてPromiseオブジェクトにパッケージします.
asyn関数が返されていない場合

async function testAsync1() { console.log("hello async"); } let result1 = testAsync1(); console.log(result1);

結果

hello async
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

結果はPromise.resoveに戻ります.
awaitは何をしましたか?
文字の意味からawaitは待つということです.awaitは表現式を待っています.この表式の戻り値はpromiseオブジェクトでもいいし、他の値でもいいです.
awaitはずっと後の表現を待ってから後のコードを実行すると思っていますが、実際にはawaitはスレッドを渡すマークです.awaitの後の関数は先に一回実行して、それから全体のasync関数を跳び出して後のjsスタック(後で詳しく述べる)のコードを実行します.このラウンドのイベントが終わったら、async関数に戻ります.awaitの後の表式の戻り値を待っています.戻り値がpromiseでない場合は、async関数の後のコードを実行し続けます.さもなければ、戻ってきたpromiseをpromiseキューに入れます.
async/await実行手順
まず例を見ます

function testSometing() { console.log("  testSometing"); return "testSometing"; } async function testAsync() { console.log("  testAsync"); return Promise.resolve("hello async"); } async function test() { console.log("test start..."); const v1 = await testSometing();//   1 console.log(v1); const v2 = await testAsync(); console.log(v2); console.log(v1, v2); } test(); var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//   2 promise.then((val)=> console.log(val)); console.log("test end...")

出力結果:

test start...
  testSometing
promise start..
test end...
testSometing
  testAsync
promise
hello async
testSometing hello async

test関数が実行されるとき
const v 1=await test Someting()
を実行すると、testSometingという関数を実行して「testSometingを実行する」という文字列をプリントします.そして、awaitはスレッドを譲って後ろの部分を実行します.
var promise=new Promise=>{consolove.logs];resolive;ポイント2
そして「promise start.」をプリントアウトします.これから帰ってきたこのpromiseをpromiseキューに入れて、「test end...」を印刷し続けます.このサイクルが終わったら、async関数に戻ってきます.これまでawaitの後の表式の戻り値を待っています.testSometingはasync関数ではありません.このように、「testSometing」という文字列を返します.test関数は続けて実行します.
const v 2=await testAsync()
前と同じようにtest関数を飛び出して後続コードを実行します.イベントサイクルはpromiseのキューに入り、実行promise.then((val)=> console.log(val));thenの後の文を実行して、前と同じようにまたtest関数に戻して実行します.
これはasync/await関数の後でjsの実行の順序で、私達はもう一つの列を見て、testSometing関数の前にasyncを加えます.

async function testSometing() { console.log("  testSometing"); return "testSometing"; } async function testAsync() { console.log("  testAsync"); return Promise.resolve("hello async"); } async function test() { console.log("test start..."); const v1 = await testSometing(); console.log(v1); const v2 = await testAsync(); console.log(v2); console.log(v1, v2); } test(); var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//3 promise.then((val)=> console.log(val)); console.log("test end...")

出力結果:

test start...
  testSometing
promise start..
test end...
promise
testSometing
  testAsync
hello async
testSometing hello async

前の例と比較して発見promise.then((val)=> console.log(val));先与console.log(v1);実行したのは、現在のtestSometing関数にasyncを加えたからです.戻るのは一つPromise対象が待つべきです.その後プロモーションのタスクキューを実行しますので、先に実行しました.