Help us understand the problem. What is going on with this article?

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ライフを!!

zukkis
はずかしい...
un-t
インターネットビジネスを中心とした企画、設計、デザイン、システム、運用、マーケティング、リサーチ等の総合的なクリエイティブファームです。
https://www.un-t.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした