この記事で書くこと

外部apiの非同期処理を、どうやったら同期的に扱えるようにできるか模索した結果の記録

この記事で書かないこと

await/asyncの説明

外部apiを使用するイメージ

.js

const externalApi = new ExternalApi();
const response = externalApi.execute(); // 非同期処理になる
if (response.status == 'Success') {
  // 何かresponseを使った処理をする
} else {
  // エラー処理ここで
}
// さらに呼び出すこともあるかもしれない
if (isSpecialCondition) {
  const response2 = externalApi.execute(); // 非同期処理になる
}
console.log(response, response2); // どうなる？

このような処理を書くときにどうやって書いたらいいか

.js

async function callExternalApi() {
  try {
    const externalApi = new ExternalApi();
    const response = await externalApi.execute();
    if (response.status == 'Success') {
      // 何かresponseを使った処理をする
    }
    if (isSpecialCondition) {
      const response2 = await externalApi.execute();
    }
  } catch (err) {
    // error処理
  } finally {
    console.log(response, response2);
  }
}

のように書きたい。

そもそもExternalApi側が用意しているinterfaceを理解することから

.js

// externalApi.execute(数字の配列の指定, 実行が終わったら結果を返して欲しい関数名の指定);
externalApi.execute([1,2], callbackMethodName);

externalApiはexecuteを呼ばれると、第一引数の配列を処理し、その結果をAPIを使用するこちら側の指定した関数名の引数に渡すというもの。

試したこと

.js

// await callAsyncTest1(numArray) される想定

// NG: 何の解決にもなっていない。
function callAsyncTest1() {
  return new Promise(resolve => {
    const externalApi = new ExternalApi();
    const response = externalApi.execute(numArray, double);
    if (response) {
      resolve();
    }
  });
}
function double(num) {
  num * 2
};


// OK: この方法で解決した。
function callAsyncTest2(numArray) {
  return new Promise(resolve, reject => {
    const double = (res) => {
      if (res.status === 'success') {
        resolve({doubleResult: res * 2, status: 'success'}); // 簡易的な例です。
      } else {
        reject('errorです');
      }
    }
    const externalApi = new ExternalApi();
    externalApi.execute(numArray, double);
  });
}

callback関数をPromiseの中に書くというのが浮かばずに解決するのに時間がかかりました。。