👏

非同期通信のpromiseを理解する

2024/01/11に公開

JavaScript

tech

promiseとは？

非同期処理の「成功」「失敗」を表すオブジェクト

コールバック関数とは何が違うのか？

コールバック関数で記述

コールバック関数は「非同期処理を行う関数にコールバック関数を直接渡す」

import { readFile } from "fs";

readFile("foo.txt", "utf8", (err,result) => {
  console.log(result);
});

console.log("読み込み開始")

readFileは第3引数にコールバック関数を渡す。
エラーがあれば「err」に、成功すれば「result」に値が入る。

Promisで記述

promisを使う場合は、
1.「非同期を行う関数はPromisオブジェクトを返す」
2.「返されたPromiseオブジェクトにthenでコールバック関数を渡す」

import { readFile } from "fs/promises";

const p = readFile("foo.txt", "utf8")

p.then((result) => {
  console.log("成功")
});

p.catch((error) => {
  console.log("失敗")
});

readFile()ではPromiseオブジェクトが返される。
そのため、pにはPromiseオブジェクトが格納されてる

Promisのステータス

Promiseには、PromiseStatusというstatusがあり、3つのstatusがある。

pending: 未解決 (処理が終わるのを待っている状態)
resolved: 解決済み (処理が終わり、無事成功した状態)
rejected: 拒否 (処理が失敗に終わってしまった状態)

処理が成功した時に、PromiseStatusはresolvedに変わり,thenに書かれた処理が実行される。
処理が失敗した時は、PromiseStatusがrejectedに変わり、catchに書かれた処理が実行される。
※引用：【ES6】 JavaScript初心者でもわかるPromise講座
※参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promiseオブジェクトのインスタンスメソッド

◎thenメソッド
thenメソッドは、Promise が成功した（つまり「解決済み」状態になった）ときに実行されるコールバック関数を登録する。

myPromise.then(value => {
    // 成功時の処理
});

◎catchメソッド
catchメソッドは、Promise が失敗した（つまり「拒否」状態になった）ときに実行されるコールバック関数を登録する。

myPromise.catch(error => {
    // エラー処理
});

◎finallyメソッド
finallyメソッドは、Promise が履行されても拒否されても実行されるコールバック関数を登録する。
コールバック関数に引数は渡さない

myPromise.finally(() => {
    // 成功でも失敗でも実行される処理
});

参考

書籍：プロを目指す人のためのTypeScript入門