promise - Javascript

promise とは

Promiseは、非同期処理を扱うためのオブジェクトです。

Javascriptでは、実行中の処理の完了をまってから次の処理が実行されます。前の処理の完了を待ってから次の処理を実行することを「同期処理」といいます。

Javascriptの非同期処理とは、メインスレッドから一時的に切り離された処理のことです。

promise を使うと、非同期処理を実行し、それが終了するまで次の処理を遅延させることができます。

非同期処理のサンプル

setTimeout 関数は、非同期処理の関数です。次のコードを実行すると「 No1 」、「 No3 」、「 No2 」の順で表示されます。

console.log("No1");

// 1秒後に実行する処理
setTimeout(() => {
  console.log("No2");
}, 1000);

console.log("No3");

Promise オブジェクトの作成

let promise = new Promise((resolve, reject) => {});

promise を操作するメソッドには、「 then 」、「 catch 」、「 finally 」があります。

let promise = new Promise((resolve, reject) => {
  // promise オブジェクトの作成
});

promise.then(() => {
  // 非同期処理の成功時に実行する処理
}).catch(() => {
  // 非同期処理の失敗時に実行する処理
}).finally(() => {
  // 非同期処理完了後に必ず実行する処理
});

then メソッドは複数つなげることができます。

function A(){
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("A");
    }, 2000);
  });
}

A().then((txt) => {
  console.log(txt);
}).then(() => {
  console.log("B");
});

resolve関数とreject関数

非同期処理が成功した場合は、resolve関数を実行します。resolveが呼び出されると、Promiseインスタンスの thenメソッドで登録したコールバック関数が呼び出されます。

非同期処理が失敗した場合は、reject関数を実行します。rejectが呼び出されると、Promiseインスタンスの catchメソッドで登録したコールバック関数が呼び出されます。

resolve、reject それぞれのメソッドに、引数を指定することができ、thenメソッド、catchメソッドで呼び出すことができます。

resolve ：リゾルヴ

決定する、解決する

reject ：リジェクト

拒否する

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    let num = 5;

    if(num >= 5){
      resolve(num);
    } else {
      reject(num);
    }
  }, 1000);
});

promise.then((value) => {
  console.log(`5以上の値 ${value} のため成功`);
}).catch((err) => {
  console.error(`5より小さい値 ${err} のためエラー`);
}).finally(() => {
  console.log("処理を終了します");
});

Promise を使う

次のコードを実行すると、「 B 」「 A 」という順で表示されます。

setTimeout(function(){
  console.log("A");
}, 1000);
console.log("B");

次のpromise を使ったコードを実行すると、「 A 」「 B 」の順で表示されます。

let promise = new Promise((resolve, reject) => {
  setTimeout(function(){
    console.log("A");
    resolve();
  }, 1000);
});
promise.then(function(txt){
  console.log("B");
});

複数の then メソッドに値を渡していく

次のコードは「 A A B 」の順で表示されます。

最初の then メソッドの戻り値を、promise インスタンスにし resolve の引数に値を設定すれば、次の then メソッドに値を渡せます。

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("A");
  }, 2000);
});

promise.then((txt)=>{
  console.log(txt);
  let txt2 = txt;
  return new Promise((resolve, reject) => {
    resolve(txt2)
  })
}).then((txt) => {
  console.log(txt);
  console.log("B");
})

Promise.all()

引数に指定したすべてのPromiseを実行します。

async function fetchall() {
  const promise1 = fetch('data.json').then((res) => res.json())
  const promise2 = fetch('data2.json').then((res) => res.json())

  const [res1, res2] = await Promise.all([promise1, promise2])
  return [res1, res2]
}

fetchall()
  .then(([a, b]) => {
    for(let i of a){console.log(i)}
    for(let j of b){console.log(j)}
})