0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScript Promiseオブジェクト

Posted at

初学者なので学習した内容をまとめていく。
今回は、promiseオブジェクトについて

##promiseオブジェクト
JavaScriptはプログラムのコードを同期的に上から処理していくのではなく非同期で(1つの部分で処理に時間がかかったら次の処理をする)プログラムが走る。そのため、同期的に処理したいならば、コールバック関数を使用していた。
しかし、処理が多くなる場合、このコールバック関数はネストが深くなる、コールバック地獄になってしまう。

そこで!PromiseオブジェクトがES2015にて標準化された。

// Promiseコンストラクター
 new Promise((resolve,reject) => {statement})

resolve: 処理の成功を通知するための関数
reject: 処理の失敗を通知するための関数
statement: 処理本体

// thenメソッド
 promise.thne(success, failure)

promise: Promiseオブジェクト
success: 成功コールバック関数
failure: 失敗コールバック関数

###非同期処理の連結

function asyncProcess(value){
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      if(value){
        resolve(`入力値: ${value}`);
      } else {
        reject('入力はからです。');
    },500);
  });
}

asyncProcess('A')
  .then(
    response => {
      console.log(response);
      return asyncProcess('B');
    }
).
then(
    response => {
      console.log(response);
    },
    error => {
      console.log(error);
    }
);

Aの処理が終わり、エラーがなければBの処理へうつる。もし途中でエラーがあると、error処理にうつり、そこで終わる。
これであたかも、thenによって処理が1本の道のようになる。

###全ての非同期処理が成功した場合にコールバックする allメソッド
Promise.allメソッドを使うと、その中に書かれた非同期処理が全て成功した場合に処理を実行する。

 Promise.all(promises)

promises: 監視するPromisep部ジェクト群(配列)

 Promise.all([
  asyncProcess('A'),
  asyncProcess('B')
]).then(
  response => {
    console.log('成功しました');
  },
  error => {
    console.log('失敗しました');
  }
);

###非同期処理のある1つが完了したところでコールバック raceメソッド
並行して処理していた内、1つが最初に完了したところで成功コールバックを呼び出す。
書き方はPromise.allと同じ。

そして、進化版もあった!
async/await 入門(JavaScript)

@soarflat 様の記事がわかりやすかったのでここに。

0
1
0

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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?