1
2

More than 5 years have passed since last update.

非同期処理の順序制御

Posted at

非同期処理の順序制御。良く使うパターンなので、切り出してみました。

たとえば、ユーザ入力要素(inputとか)が変更されると、APIにアクセスして、返ってきた値を、反映させるような場合。API処理にかかる時間は不定なので、戻ってくる順番がずれて、表示がおかしくなる場合があります。これを防ぐ処理です。

class AsyncOutOfOrderError {}
class AsyncCommitter {
  requestId = 0;
  commitId = 0;
  async run(callback) {
    this.requestId += 1;
    const currentRequestId = this.requestId;
    const value = await callback();
    if (currentRequestId <= this.commitId) {
      throw new AsyncOutOfOrderError();
    }
    this.commitId = currentRequestId;
    return value;
  }
}

使うときは、

try {
  const value = await this.asyncCommitter.run(async () => {
   // ここに制御対象の処理
  });
  // ここに正常に終了したときの処理
} catch (error) {
  if (!(error instanceof AsyncOutOfOrderError)) {
    throw error;
  }
  // ここに順番がおかしくなったときの処理(あれば)
}

もしかしたら、run(callback, onSuccess, onErrror) とかの方が使いやすいかもしれません。

皆さん、これに相当する処理、どうさされてますか?同等の機能を持つライブラリを知っている人がいたら教えてもらえると幸いです。

1
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2