JavaScriptでPromise.race() を使ってタイムアウト処理を書く

目的

JavaScriptにおいて、長いリクエストがタイムアウトした場合の処理を実装するのには
様々な書き方があると思うが、
その中でもasync, awaitを使った非同期処理におけるタイムアウト処理の実装に苦労したので
まとめておく。
実装が雑で申し訳ないが、誰かの役に立てば。

参考資料

• Promise.race() - 複数のPromise関数を実行し、最初の結果を得る
• 【JavaScript】ちゃんと理解しておきたいPromiseの勘所など

サンプルコード

共通部分

async function main_request() {
  return new Promise((resolve) => {
    // あえてタイムアウト時間より長い処理にする
    setTimeout(() => {
      resolve("ok");
    }, 5000);
  });
}

async function exec_request() {
  var response = await promise_test(3000)
  console.log(response)
}

Promise.race()を使わない実装

return部分で何を返しているかがわかりにくい

async function promise_test(ms) {
    return new Promise(async function (resolve) {
        setTimeout(() => {
            // タイムアウト
            resolve('timeout');
        }, ms);
        var response = await main_request()
        resolve(response)
    });
}

exec_request() //output: timeout

Promise.race()を使った実装

return部分で何を返しているかが明確

async function promise_test(ms) {
  var timeout = (ms) => new Promise(function (resolve) {
    setTimeout(function () {
      // タイムアウト
      resolve("timeout");
    }, ms);
  });

  return Promise.race([
    timeout(ms),
    main_request()
  ])
}

exec_request() //output: timeout

注釈

async, awaitは不慣れで、無駄な箇所があるかもしれません。
よりよい書き方があったら教えてください！