Promise使った非同期処理入門

JavaScriptの非同期処理

前提としてJavaScriptはシングルスレッドなので、並行処理（2つの処理を同時作業）はできないです。
ですが、XHR(サーバーと通信を行う処理)等で処理をサーバーに移譲し
「JavaScript以外に処理を任せた場合」、並行して処理を行う事が可能です。
※JavaScriptのみで非同期風に処理を行う方法もあります。

今回紹介する、Promiseは並行処理していたプロセスの完了後に行いたい処理が出てきた場合に活躍するオブジェクトです。

料理でいうと、カレーを作る場合、ルーの作成と、ご飯を炊く作業は同時並行で進める事ができます。
ただ最終的に、炊きあがったご飯に、ルーをかけてカレーを提供する際には、ルーもご飯も出来上がってる必要がありますよね!

ただ、作る人や環境によってルーを作るスピードやお米の炊き時間が違うように、
サーバーのスペックや状態によってプロセスの完了タイミングは違ってきます。
この完了のタイミング確実に待ってから、次の処理を行いたいときに大活躍なのが、Promise先生です!

STEP1 Promiseオブジェクトの生成

Promiseをnew演算子で呼び出し、Promiseオブジェクトを作成する事で使用する事ができます。
Promiseオブジェクトは非同期の作業を開始して、完了した際に resolve 関数 (成功した場合)
もしくは reject 関数 (エラーが発生した場合) のいずれか一方を呼び出します。
下記コードは例です。

const url = "https://dummynourldayozukki/gets/"

const promise = new Promise(function(resolve, reject) {
  // ここに非同期処理を書く(^o^)
  const request = new XHTMLRequest();
  request.open('GET', url, true);

  request.onload = () => {
    // 成功した場合
    resolve('成功');
  };

  request.onerror = () => {
    // 失敗した場合
    reject(new Error('エラー'));
    return;
  }
});

STEP2 thenメソッドを使う

thenメソッドは、Promiseオブジェクトの中の非同期処理がエラーなく「完了」した際に呼ばれます。
resolveメソッドが呼ばれたときです。

Promiseオブジェクトのthenメソッドが呼ばれます。
下記の例のresponseには、resolveで設定した値が呼ばれます。

const url = "https://dummynourldayozukki/gets/"

const promise = new Promise(function(resolve, reject) {
  // ここに非同期処理を書く(^o^)
  const request = new XHTMLRequest();
  request.open('GET', url, true);

  request.onload = () => {
    // 成功した場合
    resolve('成功');
  };

  request.onerror = () => {
    // 失敗した場合
    reject(new Error('エラー'));
    return;
  }
});

// ↓↓↓↓↓↓↓↓追記↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

promise.then(function (response) {
  console.log(response); // '成功'
});

STEP3 catchメソッドを使う

処理にエラーが発生した場合に、catchメソッドが呼ばれます。
正しく取得できなかった時はこちらに処理を書きます。

const url = "https://dummynourldayozukki/gets/"

const promise = new Promise(function(resolve, reject) {
  // ここに非同期処理を書く(^o^)
  const request = new XHTMLRequest();
  request.open('GET', url, true);

  request.onload = () => {
    // 成功した場合
    resolve('成功');
  };

  request.onerror = () => {
    // 失敗した場合
    reject(new Error('エラー'));
    return;
  }

  // ↓↓↓↓↓↓↓↓追記↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

  promise
  .then(function (response) {
    console.log(response); // '成功'
  })
  .catch(function (err) {
    console.log(err.message); // エラー'
  });
});

最後に

今回は、Promiseの基礎的な使い方を説明しました。
Promiseを使うと非同期処理の呼び出しと、
その後の処理がthenやcatchによって境界ができコードが分かりやすくなります。

今回紹介できませんでしたが、
Promise.allや、Promise.raceを使うことで複数の非同期処理の成功タイミングで、処理を行う記述もできます。

では、良いJavaScriptライフを!!