ドキュメント

Document

自分のための備忘録です。

非同期処理

TypeScript の非同期処理についての覚書です。

参考

「プロを目指す人のための TuypeScript 入門」鈴木僚太著

本ページで引用元を示していない場合は上記書籍から引用しています。

非同期処理の実行

同期処理が完了した後、マイクロタスク（Promise のコールバックなど）、続いてマクロタスク（setTimeout など）がイベントループによって順に処理されます。

非同期処理の分類（マイクロタスク, マクロタスク）

JavaScript の非同期処理は、イベントループを基盤にマイクロタスクとマクロタスクに分類されます。

分類	代表的な例	実行順序の優先度
マイクロタスク	`Promise.then`, `Promise.catch`, `Promise.finally` など	コールスタック（同期処理のスタック）が空の直後に実行
マクロタスク	`setTimeout`, `setInterval`, I/O など	マイクロタスクがすべて完了した後に実行

実行順序の優先度の詳細（イベントループの実行順序）

コールスタックが空になる
マイクロタスクをすべて処理
マクロタスクを 1 つ取り出して実行
1 に戻る

サンプル

1. 概要

function sampleAsynchronous() {
  return new Promise<string>(resolve => {
      console.log('First.');        // ----- (1)
      resolve('Fourth.')
  }
)};

// new Promise の中は同期的に実行されます
const promiseObj = sampleAsynchronous();

setTimeout(() => { 
    console.log('Fifth.')           // ----- (5)
},0)

console.log('Second.');             // ----- (2)


promiseObj.then((data: string) => {
  console.log(data)                 // ----- (4)
});

console.log('Third.')               // ----- (3)


// First.
// Second.
// Third.
// Fourth.
// Fifth.

実行順	タスク内容	種類	解説
(1)	`console.log('First.')`	同期処理	`sampleAsynchronous` 関数内の `Promise` コンストラクタの中
(2)	`console.log('Second.')`	同期処理	メインスレッドの通常の処理
(3)	`console.log('Third.')`	同期処理	同上
(4)	`console.log(data)` → `Fourth.`	マイクロタスク	`Promise.resolve(...).then(...)` のコールバック
(5)	`console.log('Fifth.')`	マクロタスク	`setTimeout(..., 0)` によりキューに登録されたコールバック

2. 詳細

// (N) は N 番目に実行

function createPromise() {
  return new Promise<string>(resolve => {
      console.log('task 2');        // (2) -> 同期処理
      resolve('task 4')
  }
)};

function createOtherPromise() {
  return new Promise<string>(resolve => {
      console.log('task 6');        // (6) -> 同期処理
      resolve('task 8')
  }    
)}

console.log('task 1');              // (1) -> 同期処理

const promiseObj = createPromise();
promiseObj.then((data) => {        // マイクロタスクを登録
    console.log(data);             // (4) ->マイクロタスク
})

setTimeout(() => {                 // マクロタスク（1000ms後）登録 -> 後で実行
    console.log('task 5')          // (5) -> マクロタスクの同期部分 約1000ms後に実行

    const promiseOtherObj = createOtherPromise();
    promiseOtherObj.then((data) => console.log(data))

    setTimeout(() => {             // マクロタスク（この時点から2000ms後）登録 -> 後で実行
        console.log('task 9')      // (9) -> マクロタスクの同期部分 約3000ms後に実行
        console.log('task 10')     // (10) -> マクロタスクの同期部分
    }, 2000)

    console.log('task 7')          // (7) -> マクロタスクの同期部分
}, 1000)

console.log('task 3');             // (3) -> 同期処理

// task 1
// task 2
// task 3
// task 4
// task 5
// task 6
// task 7
// task 8
// task 9
// task 10

タスク	種類	実行順序	タイミング
`task 1`	同期処理	(1)	直ちに実行
`task 2`	同期処理	(2)	`createPromise` 内で即時実行
`task 3`	同期処理	(3)	同上
`task 4`	マイクロタスク	(4)	同期処理終了後、次のマクロタスク前
`task 5`	マクロタスク	(5)	約1000ms 後
`task 6`	同期処理	(6)	マクロタスク内の同期部分
`task 7`	同期処理	(7)	同上
`task 8`	マイクロタスク	(8)	`task 7` の直後
`task 9`	マクロタスク	(9)	`task 5` の中で登録、そこから 2000ms後
`task 10`	マクロタスク	(10)	同上

Promise チェーン

then / catch / finally は常に新しい Promise を返し、その中で return した値が次の then に渡されます。コールバックで何も return しない場合、次の then には undefined が渡されます。

function sampleAsynchronous() {
  return new Promise<number>(resolve => {
      resolve(100)
  }
)};

const promiseObj = sampleAsynchronous();

promiseObj.then((data: number) => {
  console.log(data)
  return data * 2
}).then((data: number) => {
    console.log(data)
});

// 100
// 200

async 関数

Promise をベースとして非同期処理を簡単に扱うために導入されました。

サンプル

async 関数は Promise を返します。

async function asyncFunc(): Promise<string> {
    return 'Second.';
}

const promiseObj = asyncFunc();
promiseObj.then((data: string) => console.log(data)); --- (2)

console.log('First.')                                 --- (1)

// First.
// Second.

await 式

非同期処理を同期的に扱うための便利な方法として await が導入されました。 await を使わないで非同期処理を同期的に扱うには複雑で技巧的になります。

async function asyncFunc(): Promise<string> {
    const promiseObj = Promise.resolve('First.');
    // then コールバックはマイクロタスクとしてキューに入れられ、同期処理 `console.log('Second.')`の後に処理されます
    // そのため、Second. が先に出力され、その後に First. が出力されます
    promiseObj.then((data: string) => console.log(data) );

    console.log('Second.')

    return 'Third.';
}

const otherPromiseObj = asyncFunc();
otherPromiseObj.then((data: string) => console.log(data)); 

// Second.
// First.
// Third.

await を使用することで First -> Second. -> Third. の順で表示するように改善します。

async function asyncFunc(): Promise<string> {
    const promiseObj = Promise.resolve('First.');
-    promiseObj.then((data: string) => console.log(data) );
+    const data = await promiseObj;
+    console.log(data);
    console.log('Second.')
    return 'Third.';
}

const otherPromiseObj = asyncFunc();
otherPromiseObj.then((data: string) => console.log(data)); 

// First.
// Second.
// Third.

詳細

await は 同期処理を await が解決するまで遅らせます。

function createPromiseInAsync(): Promise<string> {
    return new Promise<string>((resolve) => {
        console.log('同期処理（ in Promise Defined in Async ）' );
        resolve('非同期処理（ in Promise Defined in Async ）');
    })
}

async function createPromiseByAsync() {
    console.log('同期処理 1（ in Async ）');
    const p = createPromiseInAsync();
    p.then((data) => console.log(data));
    console.log('同期処理 2（ in Async ）')
    return '非同期処理（ in Async ）';
}

async function createPromiseByAsyncWithAwait() {
    console.log('同期処理 1（ in Async ）');
    const data = await  createPromiseInAsync();
    console.log(data);
    console.log('同期処理 2（ in Async ）')
    return '非同期処理（ in Async ）';
}

function executeTimeout() {
    setTimeout(() => {
        console.log(`同期処理（ in Timeout ）`);
        Promise.resolve('非同期処理（ in Promise Defined in Timeout ）').then((data) => console.log(data));
        console.log('同期処理（ in Timeout ）')
    }, 100);
}

/*
 * 実行
 */

console.log('同期処理（トップレベル）');

executeTimeout();

// createPromiseByAsync().then((data: string) => console.log(data))

 createPromiseByAsyncWithAwait().then((data: string) => console.log(data))

createPromise().then((data: string) => console.log(data))

console.log('同期処理 （トップレベル）')

// 同期処理（トップレベル）
// 同期処理 1（ in Async ）
// 同期処理（ in Promise Defined in Async ）
// 同期処理 2（ in Async ）
// 同期処理（ in Promise ）
// 同期処理（トップレベル）
// 非同期処理（ in Promise Defined in Async ）
// 非同期処理（ in Async ）
// 非同期処理（ in Promise ）
// 同期処理（ in Timeout ）
// 同期処理（in Timeout ）
// 非同期処理（ in Promise Defined in Timeout ）

/*
 * 同期処理 2（ in Async ）を非同期処理の後に遅らせる
 */

// 同期処理（トップレベル）
// 同期処理 1（ in Async ）
// 同期処理（ in Promise Defined in Async ）
// 同期処理（ in Promise ）
// 同期処理（トップレベル）
// 非同期処理（ in Promise Defined in Async ）
// 同期処理 2（ in Async ）
// 非同期処理（ in Promise ）
// 非同期処理（ in Async ）
// 同期処理（ in Timeout ）
// 同期処理（in Timeout ）
// 非同期処理（ in Promise Defined in Timeout ）