当サイトは、アフィリエイト広告を利用しています

【javascript】Promiseの基本と使い方

作成日：2025月07月26日
更新日：2025年08月02日

今さらだが、javascriptのPromiseについてまとめる。

Promiseとセットで覚えたほうがいい「async~await」については下記記事でまとめている

Promiseとは

Promiseとは

  • Promiseとは非同期処理の状態をあわらすオブジェクト

のことで、非同期処理の完了（成功／失敗）を「将来」知るためのオブジェクトであり、
非同期処理を安全にラップして、あとから処理をつなげられるようにしてくれる仕組み。

最近では非同期通信はaxiosやfechAPIを使うことが多いが
axiosもfechAPIも戻り値がPromiseでかえって来る。

Promise生成

言葉だけだとわかりづらいので実装しながらまとめる

Promise生成
const promise = new Promise(
  (resolve, reject) => {
    setTimeout(() => {resolve("非同期完了！");}, 1000);
  }
);

Promiseオブジェクトを生成する
詳しく解説する

Promiseの引数

Promiseオブジェクト生成時、引数として関数を渡す。この関数を「executor関数」という
上記の例でいえば

executor関数
(resolve, reject) => {
    setTimeout(() => {resolve("非同期完了！");}, 1000);
  }

がexecutor関数

executor関数

executor関数はコールバック関数。
「コールバック関数」とは、他の関数に引数として渡され、後で呼ばれる関数のこと。

executor関数には引数として

  • resolve関数:Promiseを成功状態として値を返す
  • reject関数:Promiseを失敗状態として値を返す

を設定する。

そして何等かの非同期処理をexecutor関数でラップする。
その非同期処理が成功時にはresolveで返却、失敗時にはrejectを使って返却する

非同期処理
(resolve, reject) => {
    setTimeout(() => {resolve("非同期完了！");}, 1000);
  }

executor関数内で非同期処理（setTimeout）を実行し、
その結果をresolveで返却している

Promiseの実行動作確認

実際にPromiseを返す関数を作って動きを見てみる
executor関数ではsettimeout関数を使う。
※本来は非同期処理になることが多い。

実装

promise実装
const promiseFunc = (val) => 
    new Promise((resolve, reject) => {
        setTimeout(() => (val >= 100 ? resolve("OK") : reject("NG")), 500);
    });


console.log("処理start");


// 成功パターン
console.log("非同期1start");
promiseFunc(200)
    .then((message) => `成功:${message}`)
    .then((editMessage) => console.log(editMessage))
    .catch((err) => console.log(err))
    .finally(() => console.log("非同期1End"));


// 失敗パターン
console.log("非同期2start");
promiseFunc(20)
    .then((message) => console.log(message))
    .catch((err) => console.log(`失敗:${err}`))
    .finally(() => console.log("非同期2End"));


console.log("処理end");

詳しく解説していく

Promise生成

Promise生成
const promiseFunc = (val) => 
    new Promise((resolve, reject) => {
        setTimeout(() => (val >= 100 ? resolve("OK") : reject("NG")), 500);
    });
  • Promiseに渡すexecutor関数には引数としてresolveとrejectを渡すようにする
  • executor関数内の処理が成功したときには resolveを呼び、処理が失敗したときは rejectを呼ぶ

Promise実行（成功）

Promise実行（成功）
promiseFunc(200)
    .then((message) => `成功:${message}`)
    .then((editMessage) => console.log(editMessage))
    .catch((err) => console.log(err))
    .finally(() => console.log("非同期1End"));
  • resolve()は呼び出し元のthen()で受け取る
  • then()はチェーンすることができる
  • finallyは最後に絶対流れる処理

Promise実行（失敗）

Promise実行（失敗）
promiseFunc(20)
    .then((message) => console.log(message))
    .catch((err) => console.log(`失敗:${err}`))
    .finally(() => console.log("非同期2End"));
  • reject()は呼び出し元のcatch()で受け取る
  • finallyは最後に絶対流れる処理

実行結果

実行結果
処理start
非同期1start
非同期2start
処理end
成功:OK
非同期1End
失敗:NG
非同期2End

非同期処理のためPromiseのthenやcatchが実行されるのはPromiseが解決されてからになるため
startやendが先に実行されている。
※Promiseに渡したコールバック関数がresovleやrejectをすることをPromiseが解決されるという　　

Promiseのエラーハンドリング(try~catch)

Promiseに渡すexecutor関数内でtry~catchを書く。
try内でエラーが発生した場合rejectされる。
そのため呼出し側ではcatchで処理を書く

index.js
// エラープロミス関数
const errorPromise = () => {
  return new Promise((resolve, reject) => {
    try {
      //エラー発生させる
      throw new Error("Some error occured");


    } catch (err) {
      //エラーが発生してるのでrejectが返却される
      reject(err);
    }
  });
};


const asyncPromiseFunc = () => {
  //errorPromise関数を実行
  return errorPromise()
    .then(value => value)
    //エラーハンドリング
    .catch(err => console.log(err))
}


asyncPromiseFunc() //結果 Some error occured

まとめ

javascritの非同期処理で使われるPromiseについてまとめてみた。
非同期処理においてはPromiseオブジェクトを理解していないと
意味がわからないことも多いので忘備録として残しておく

参考

関連記事

新着記事

タグ一覧
top