【5分でわかる】非同期処理の実装方法

この記事ではTypeScriptにおける非同期処理の実装方法をご紹介します。

非同期処理の実装方法

非同期処理とは？
Promiseで非同期処理を書く
async/awaitで非同期処理を書く

まとめ

非同期処理の実装方法

TypeScriptにおける非同期処理の実装方法をご紹介します！

今回はPromiseとasync/awaitという２種類の書き方について解説していきます。

非同期処理とは？

重たい処理をする時、APIを叩く時に処理の実行終了を待たず、次の処理を進める処理のことを言います。

Promiseで非同期処理を書く

Promiseはpending(保留中)またはfulfilled(履行済み)またはrejected(拒絶済み)と言う三つの状態で処理を管理していきます。

Promiseの作り方

以下のようにPromiseのコンストラクタをnewしてください。

const test = new Promise((resolve, reject) => {
    // resolve関数かreject 関数を記載します
});

resolve関数を指定する場合は以下のように返却する値を指定することが可能です。

resolve(123);

reject関数を指定する場合はエラーなどのログを指定できます。

reject(new Error("this is error"));

Promiseの使い方

作成したPromiseを呼び出す時は.then()を使います。

以下のように記載することでPromiseの実行が終わったあと、正常に完了した場合、正常値がresに格納され処理することができます。(エラーの場合は.catch()を使用してerrを取得します。)

例：

const test = new Promise((resolve, reject) => {
    resolve(200);
});

const test2 = new Promise((resolve, reject) => {
    reject(new Error("this is error"));
});

test.then((res) => {
    console.log('success:', res);
});
test2.catch((err) => {
    console.log('error:', err.message); 
});

実行結果：

"success:",  200 
"error:",  "this is error"

Promiseの実践的な使い方

Promiseの便利なところは一つのPromiseで処理した内容を別のPromiseに渡して連続的に処理できるところです。

// --------------
// コールするAPI群
// --------------
function request1(): Promise<number> {
  return new Promise((resolve) => {
    resolve(1);
  });
}
 
function request2(result1: number): Promise<number> {
  return new Promise((resolve) => {
      resolve(result1 + 1);
  });
}

function request3(result2: number): Promise<number> {
  return new Promise((resolve) => {
      resolve(result2 + 1);
  });
}

// --------------
// コールを実行
// --------------
request1()
  .then((result1) => {
    console.log(result1); // 1
    return request2(result1);
  })
  .then((result2) => {
    console.log(result2); // 2
    return request3(result2);
  })
  .then((result3) => {
    console.log(result3); // 3
  });

async/awaitで非同期処理を書く

async/awaitでも非同期処理を実現できます。

厳密にはasyncで非同期処理を実行し、awaitで非同期処理が終わるまで待機をするといった処理を実現できます。

`async`関数の書き方

関数の前にasyncを付与するだけです。返却される値はPromise<T>として返却されることに注意しましょう。

async function test(): Promise<number> {
  return 1;
}

test().then((result) => {
  console.log(result); // 1
});

`await`関数の使い方

async関数内の処理中で、同期処理を行いたい処理の手前でawaitを付与します。

async function testAsync(): Promise<number> {
  return 1;
}

async function testAwait() {
  const result = await testAsync();
  console.log(result); // 1
}

testAwait();