ESLintのルール「no-async-promise-executor」徹底解説！コードの読みやすさと保守性を向上させる

ESLintのルール「no-async-promise-executor」解説

ESLintのルール「no-async-promise-executor」は、async 関数を Promise コンストラクタのexecutor関数として使用することを禁止します。このルールは、コードの読みやすさと保守性を向上させるために役立ちます。

問題点

async 関数を executor 関数として使用すると、以下の問題が発生する可能性があります。

• コードの読みづらさ: async 関数は非同期処理を表すため、executor 関数内で使用すると、コードの意味が分かりにくくなります。
• バグの発生: async 関数内で resolve や reject を呼び出すと、意図せず非同期処理が開始される可能性があり、バグの原因となります。

解決策

async 関数を executor 関数として使用したい場合は、代わりに以下の方法を使用できます。

• 通常の関数を使用する: async 関数を使用せず、通常の関数を executor 関数として使用します。
• Promise.all を使用する: 複数の非同期処理を順番に実行したい場合は、Promise.all を使用できます。

例

NG例:

const promise = new Promise((resolve, reject) => {
  async function executor() {
    // 非同期処理
    const result = await someAsyncFunction();
    resolve(result);
  }

  executor();
});

OK例:

const promise = new Promise((resolve, reject) => {
  function executor() {
    // 非同期処理
    someAsyncFunction().then(result => {
      resolve(result);
    }).catch(error => {
      reject(error);
    });
  }

  executor();
});

設定方法

このルールを有効にするには、ESLintの設定ファイル（.eslintrc.json）に以下の設定を追加します。

{
  "rules": {
    "no-async-promise-executor": "error"
  }
}

ESLint no-async-promise-executor サンプルコード

NG 例

const promise = new Promise((resolve, reject) => {
  async function executor() {
    // 非同期処理
    const result = await someAsyncFunction();

    // 複数回の resolve 呼び出しはエラーになる
    resolve(result);
    resolve('This should not be called.');

    // 複数回の reject 呼び出しはエラーになる
    reject(new Error('Something went wrong.'));
    reject(new Error('This should not be called.'));
  }

  executor();
});

resolve / reject 呼び出しのタイミング

const promise = new Promise((resolve, reject) => {
  async function executor() {
    // 非同期処理開始前に resolve / reject を呼び出すと、
    // 処理が実行されない
    resolve('This should not be called.');
    reject(new Error('This should not be called.'));

    // 非同期処理
    const result = await someAsyncFunction();
    resolve(result);
  }

  executor();
});

try-catch の使用

const promise = new Promise((resolve, reject) => {
  async function executor() {
    try {
      // 非同期処理
      const result = await someAsyncFunction();
      resolve(result);
    } catch (error) {
      reject(error);
    }
  }

  executor();
});

async / await の混在

const promise = new Promise((resolve, reject) => {
  async function executor() {
    // 非同期処理
    const result = await someAsyncFunction();

    // async / await の混在はエラーになる
    resolve(result.then(() => {
      return 'This should not be called.';
    }));
  }

  executor();
});

Promise.all の使用

const promise = new Promise((resolve, reject) => {
  async function executor() {
    // Promise.all を使用したい場合は、
    // async 関数を executor 関数として使用しない
    const results = await Promise.all([
      someAsyncFunction1(),
      someAsyncFunction2(),
    ]);

    resolve(results);
  }

  executor();
});

OK 例

通常の関数を使用

const promise = new Promise((resolve, reject) => {
  function executor() {
    // 非同期処理
    someAsyncFunction().then(result => {
      resolve(result);
    }).catch(error => {
      reject(error);
    });
  }

  executor();
});

arrow function を使用

const promise = new Promise((resolve, reject) => {
  const executor = async () => {
    // 非同期処理
    const result = await someAsyncFunction();
    resolve(result);
  };

  executor();
});

Promise.all を使用

const promise = Promise.all([
  someAsyncFunction1(),
  someAsyncFunction2(),
]);

async 関数内で resolve / reject を直接呼び出す

const someFunction = async () => {
  // 非同期処理
  const result = await someAsyncFunction();

  // Promise を返す
  return new Promise((resolve, reject) => {
    resolve(result);
  });
};

const promise = someFunction();

ESLint no-async-promise-executor 違反を回避する方法

通常の関数を使用する

async 関数を使用せず、通常の関数を executor 関数として使用します。

const promise = new Promise((resolve, reject) => {
  function executor() {
    // 非同期処理
    someAsyncFunction().then(result => {
      resolve(result);
    }).catch(error => {
      reject(error);
    });
  }

  executor();
});

arrow function を使用

ES6 の arrow function を使用して、executor 関数を簡潔に記述できます。

const promise = new Promise((resolve, reject) => {
  const executor = async () => {
    // 非同期処理
    const result = await someAsyncFunction();
    resolve(result);
  };

  executor();
});

Promise.all を使用

複数の非同期処理を順番に実行したい場合は、Promise.all を使用できます。

const promise = Promise.all([
  someAsyncFunction1(),
  someAsyncFunction2(),
]);

async 関数内で resolve / reject を直接呼び出すことで、Promise を返すことができます。

const someFunction = async () => {
  // 非同期処理
  const result = await someAsyncFunction();

  // Promise を返す
  return new Promise((resolve, reject) => {
    resolve(result);
  });
};

const promise = someFunction();

その他のライブラリを使用する

bluebird などのライブラリには、Promise.promisify などの便利な関数があり、async 関数を Promise に変換することができます。

const promise = Promise.promisify(someAsyncFunction)();