Zenn
🤖

非同期処理② promise , async/awaitについて

2022/12/01に公開
初心者
#
promise
#
async
#
非同期処理
#
await
tech

プログラムでの非同期処理の実装方法

前回は同期処理と非同期処理について記述した。

https://zenn.dev/airiswim/articles/4a620d01917747

この続きをやっていく！！

jsでの非同期処理の方法はコールバック、Promise , async/awaitだ。
登場順で、見ていくと…

コールバック関数

  • コールバック＝引数にとる関数のこと
  • Node.jsの標準ライブラリーで、非同期処理にコールバックを使っている！

これにより非同期処理が可能になったが…問題もたくさんあった。

【問題点】

  • 複数の非同期処理を順に実行する場合、
    　ネストがどんどん深くなる.(＝読みづらい)
    　（→ネスト…ルーチンやデータブロックの中に、またルーチンやデータブロックが入ること）
  • 複数の非同期処理を並列に実行して完了を待ち合わせるのは難しい
  • 非同期処理で例外を投げるときの問題もあり

ネストが深くなりすぎるが故に、読みづらく　”コールバック地獄”　とも呼ばれるほどに…

そこでこのデメリットを改善した、新しいものが誕生！！

Promise

前回のコールバックでの三つの問題点を解決するために生まれた！！！！
これは簡単に言うと、後で値返すから待っててね、と言う約束！
そしてPromise=非同期処理！

【 Promiseの利点】

  • 連鎖した非同期をフラットにかける。（同期処理のようにできる）
  • status（状態）を持つ

【Promiseとは】

  • futureパターン(promiseパターン)と言われるデザインの一種
  • promiseオブジェクト(インスタンス)には三つのstatus(状態)がある
    　　①pending（保留）: 初期状態。まだ非同期処理は終わってない（成功も失敗もしてない）
    　　②fulfilled（成功）: 非同期処理が正常に終了した
    　　③rejected（拒否）: 非同期処理が失敗した

< Promiseの基本>

//promiseの基本！！

//最初は待っててねの状態
new  Promise(()=>{});

//resolveすると完了の状態
new  Promise( resolve => resolve() );

//完了時の値をthenで繋げて次の処理に渡せる
new  Promise(resolve => resolve("こんにちは")).then(res => console.log(res));

処理が成功した時

PromiseStatusがresolvedになって、thenに書かれた処理が実行される。

処理が失敗した時

PromiseStatusがrejectedになって、catchに書かれた処理が実行される。

<引数>

  • onFulfiled
    promiseが成功した時に呼び出される関数(function)
  • onRejected
    promiseが拒否された際によびだされる関数(function)

【promiseの問題点】
thenで繋げていくのは、みづらい…

async / await

promiseをより快適に利用する特別な構文！！

func = async() => {  //関数に対してasyncと宣言=> "この関数は非同期関数だよ"
	await log(3);
	await log(2);
  await log(1);　//関数の呼び出しの前にawaitつけることでpromiseの結果が返ってくるまで待つ
};

log = (num) => {
	return new promise(resolve => {
		setTimeout() => {
			console.log(num);
			resolve();
		}, 1000);

	})
}

func();

async関数

async を関数の前につけるだけで 関数は常にpromiseを返す。
自動的にpromiseでラップしてくれる
この中で await を使えるようにする

await関数

awaitはasync関数内のみで動作し、promiseが確定するまでJavaScriptを待機させる。
⚠️通常の関数でawaitを使うことはできない⚠️
非async関数で await を使おうとした場合、構文エラーになる

今日はここまで！！
ここから先はまた勉強して使ってみてからのまとめで！！

そして上記で最初に出てきたnode.jsについて
理解していなかったのでまとめてみた…！

Node.jsとは

javascriptをServer側で使うもの！！

Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境

調べるとこのように出てくるが、初心者の私には、てっきりわからなかった。

元々、browserがJavaScriptで記述し、
ServerサイドはJavaScript以外のいろんな言語で記述可能だった。

JavaScriptも、Serverサイドで使えるようにならないかな？？
で作られたのが”node.js”ということなのだ！！！！

では、今日はここで終了！！！

明日は12月1日。
この誕生日の武田信玄の名言
"一生懸命だと、知恵が出る。
中途半端だと、愚痴が出る。
いい加減だと、言い訳が出る"

おやすみなさい🌙

Discussion