【初心者向け】Promiseや非同期処理とは何か？同期処理との違い(then, catch,finallyとは何か)を実例でわかりやすく解説

then(成功時に実行する処理)
then(成功時に実行する処理, 失敗時に実行する処理)

const myPromise = new Promise( (resolve, reject) => {...};

myPromise.then(function(data) {
  // サーバーからデータが正常に取得されたら実行
  console.log("成功しました。取得したデータ:", data);
});

getData() // 1. データを取得
  .then(data => process(data)) // 2. データを加工
  .then(processedData => save(processedData)) // 3. 加工したデータを保存
  .then(() => console.log("全て完了！"))
  .catch(error => console.error(error)); // どこかで失敗したらここでキャッチ

.catch(失敗した時の処理)

const myPromise = new Promise( (resolve, reject) => {...};

myPromise
  .then(function(data) {
    // 成功時の処理
    console.log("データ取得完了");
  })
  .catch(function(error) {
    // 成功せずに終わったとき（または途中の.thenでエラーが発生したとき）に実行
    console.error("エラーが発生しました:", error.message);
  });

promiseA()
  .then(
    dataA => promiseB(), // 成功処理 (Bを実行)
    error => console.error("Aのエラーをキャッチ") // 
  )
  .then(
    dataB => promiseC(), // Bで失敗したので、ここは実行されない
    error => console.error("Bのエラーをキャッチ:", error.message)
  );

promiseA()
  .then(dataA => promiseB()) // Bを実行
  .then(dataB => promiseC()) // Bで失敗したので、ここはスキップされる
  .catch(error => {
    // A、または B、または C (またはその間の then) で
    // 発生した全てのエラーをここでまとめてキャッチ！
    console.error("エラー発生:", error.message); //
  });

myPromise
  .then(result => { /* 成功時の処理 */ })
  .catch(error => { /* 失敗時の処理 */ })
  .finally(() => { 
    // 成功・失敗どちらの場合でも必ず実行する
    console.log("Promiseの処理が終了しました。"); 
  });

new Promise((resolve, reject) => { ... })

new Promise((resolve, reject) => {
    // まず非同期処理を記述

    // 処理が成功した場合
    // resolve() を呼び出し、Promiseを Fulfilled にする
    resolve(成功時の値); //この値がthenの引数になる

    // 処理が失敗した場合
    // reject() を呼び出し、Promiseを Rejected にする
    reject(エラーオブジェクト); //この値がcatchの引数になる
});

const myPromise = new Promise((resolve, reject) => {});

myPromise
  .then( result => {})
  .then( result2 => {})
  .catch(error => {});

const myPromise = new Promise((resolve, reject) => {
    // まず非同期処理を記述

    // 処理が成功した場合
    // resolve() を呼び出し、Promiseを Fulfilled にする
    resolve(成功時の値); //この値がthenの引数になる

    // 処理が失敗した場合
    // reject() を呼び出し、Promiseを Rejected にする
    reject(エラーオブジェクト); //この値がcatchの引数になる
});

myPromise
  .then( result => {
    // 成功したとき（Fulfilled）に実行される関数
    // result には、成功時の値が入ります
    console.log("成功しました！取得したデータ:", result);
    return "次の処理へ"; // 次の.then()へ渡す値を返す
  }).then( result2 => {
    // 成功したとき（Fulfilled）に実行される関数
    // result2 には、成功時の値が入ります
    console.log("成功しました！2つ目の取得したデータ:", result2);
    return "次の処理へ"; // 次の.then()へ渡す値を返す
  })
  .catch( error => {
    // 失敗したとき（Rejected）に実行される関数
    // error には、失敗時のエラーが入ります
    console.error("エラーが発生しました:", error);
  });

new Promise((resolve, reject) => { ... })

myPromise
  .then( result => {})
  .then( result2 => {})
  .catch(error => {})
  .finally(console.log("処理終了！"));

//Promiseを作成
const myPromise = new Promise((resolve, reject) => {
  const status = Math.random() > 0.5; // 約50%の確率で true になる

  setTimeout(() => {
    if (status) {
      resolve("成功！");
    } else {
      reject("エラー発生");
    }
  }, 2000);
});

// Promiseを使用
myPromise
  .then(result => {
    console.log(result); 
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    console.log("処理が終わりました");
　  console.log("----------------------");
  });

console.log("1. 処理開始");

// Promiseを作成
const myPromise = new Promise((resolve, reject) => {
  console.log("2. Promiseコンストラクタ内の処理");

  //2秒後に処理を完了させる
  setTimeout(() => {
    const status = Math.random() > 0.5; // 約50%の確率で true になる
    if (status) {
      resolve("Promiseの結果: 成功データ");
    } else {
      reject("Promiseの結果: エラー");
    }
  }, 1000); 
});

// Promise完了時の処理を登録
myPromise
  .then(result => {
    console.log("4. thenハンドラの処理: " + result);
  })
  .catch(error => {
    console.error("4. catchハンドラの処理: " + error);
  });


//最後のコード
console.log("3. Promise定義後の処理");

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("エラー:", error));