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

【JS】Promiseをがっつり学んでいく。

初学者なので、何かご指摘、アドバイス等ありましたらコメントしていただけるとありがたいです🙇‍♂️

 Promiseとは

Promise は非同期処理の最終的な完了もしくは失敗を表すオブジェクトです。

参考:https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises

つまりは、下記のとおり。

  • 非同期処理の成功と失敗を分岐することができる。
  • 複数の非同期処理を平行,直列的に処理することができる。

参考:https://qiita.com/saka212/items/9b6cfe06b464580c2ee6

 簡単な例から見ていく。

let myPromise = new Promise((resolve, reject) => {
  // 非同期処理をコールバック関数として渡す。
  setTimeout(function () {
    resolve("非同期処理が成功しました。");
  }, 1000);
});

myPromise
  .then(function (value) {
    // 非同期処理が成功した場合
    console.log("成功メッセージ→" + value); // => 成功メッセージ→非同期処理が成功しました。
  })
  .catch(function (value) {
    // 非同期処理が失敗した場合
    console.log("エラーメッセージ" + value); // => でエラーかreject()が出た場合に呼ばれる
  });

Promise内のコールバック関数(アロー関数)がresolve()を返したときはthen()関数が実行されます。また、Promise内のコールバック関数(アロー関数)がエラーを検出したり、reject()を返した場合はcatch()関数が実行されます。

 Promise関数内で複数の値を返す

let myPromise = new Promise((resolve, reject) => {
  // 非同期処理をコールバック関数として渡す。
  setTimeout(function () {
    resolve(["成功", "失敗してないよ"]);
  }, 1000);
});

myPromise
  .then(function (value) {
    // 非同期処理が成功した場合
    console.log(value[0]); // => 成功
    console.log(value[1]); // => 失敗してないよ
  })
  .catch(function (value) {
    // 非同期処理が失敗した場合
    console.log("エラーメッセージ" + value); // => でエラーかreject()が出た場合に呼ばれる
  });

こんな感じでresolve()内で配列で渡してあげればよき。ちなみに、当然オブジェクトも返すことができる。

let myPromise = new Promise((resolve, reject) => {
  // 非同期処理をコールバック関数として渡す。
  setTimeout(function () {
    const obj = {
      sucess: "成功",
      notFailure: "失敗してないよ",
    };
    resolve(obj);
  }, 1000);
});

myPromise
  .then(function (value) {
    // 非同期処理が成功した場合
    console.log(value.sucess); // => 成功
    console.log(value.notFailure); // => 失敗してないよ
  })
  .catch(function (value) {
    // 非同期処理が失敗した場合
    console.log("エラーメッセージ" + value); // => でエラーかreject()が出た場合に呼ばれる
  });

 複数の非同期処理を同期的に。(直列)

fn1fn2fn3のようにそれぞれの非同期処理を同期的に処理したいとします。では、書いていきましょう。

Promise.resolve()
  .then(fn1)
  .then(fn2)
  .then(fn3)

// それぞれの関数は省略

みたいに書くことで、順番に処理されます。

 複数の非同期処理を並列に。

 Promise.allを使う

fn4fn5の処理がどちらも成功した場合に実行したい処理があるとします。

Promise.all([fn4, fn5]).then(() => {
  // fn4,fn5がどちらも成功した時に実行する処理をここに書く。
});

 Promise.raceを使う

渡された関数のどれかがresolve(またはreject)を返したタイミングで返す。

Promise.race([fn6, fn7]).then(() => {
  // fn6かfn7がresolveを返した時点で実行する処理
}).catch(() => {
  console.log('error');
});

ちなみに、thenメソッドが呼ばれた後もPromiseの処理は継続されます。例えば、fn6が先にresolveを返した後でもfn7は実行されます。

こんな感じでまとめてみたので次はAsync/awaitを学んでいきたいと思います。

onikan
都内の自社開発企業で長期インターン(週5フルタイム)でエンジニアしています。| Ruby | Rails | React.js | 未経験→実務ベースの/プログラミング/エンジニア/インターンなどについて発信していきます!文系大学2年生(休学中)
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
ユーザーは見つかりませんでした