約束の箱（Promise）

01 / 05

すぐには終わらない処理がある

サーバーからデータを取ってくる、タイマーで待つ。こうした時間がかかる処理のとき、結果が返ってくるまでプログラム全体が固まってしまったら困るよね。

「今はまだ無いけれど、あとで結果を渡すよ」という約束の引換券が Promise（プロミス）だ。

02 / 05

箱を作って結果を渡す（resolve）

Promise は new Promise((resolve) => { ... }) で作る。

処理が終わったら resolve(結果の値) を呼ぶ。これで「約束が果たされた」状態になるよ。

const promise = new Promise((resolve) => {  resolve("完了したよ");});

03 / 05

あとから受け取る then

約束された結果を受け取るには、.then((値) => { ... }) を使う。

Promise の中身が完了したときに、渡した関数が呼び出されるよ。

const promise = new Promise((resolve) => {  resolve("プレゼント");});promise.then((item) => {  console.log(item);});

実行結果

プレゼント

04 / 05

タイマーと組み合わせる

setTimeout で「少し待ってから resolve」すれば、本物の時間のかかる処理を模倣できるよ。

待ち時間の間、他のコードは止まらずに先へ進むのが非同期の最大の特徴だ。

console.log("はじまり");const wait = new Promise((resolve) => {  setTimeout(() => {    resolve("あとから届いた");  }, 10);});wait.then((msg) => {  console.log(msg);});console.log("おわり");

実行結果

はじまり
おわり
あとから届いた

05 / 05

まとめて確かめよう

ここまでを整理しておこう。

new Promise((resolve) => { ... }) で約束を作る
終わったら resolve(値) で結果を届ける
.then((値) => { ... }) で届いた結果を受け取る

それじゃあ、約束を受け取ってみよう。