今の今まで間違った認識でいた、やばぁ．asyncとawaitとPromise

2024.08.20

Logging

おはようございます．今の今まで間違った認識でいた、やばぁ．asyncとawaitとPromiseの関係．asyncは非同期、awaitは同期（処理待ち）だと思う．ここでasyncした関数を取得するにはawaitして取得するだけで良いみたい．そうPromiseは出番なくて良いみたい😱．

例文コードを書いていきます．まずは非同期処理の場合です．

async function example1(a){
    if(Number.isInteger(a)){
        return a;
    }
    throw new Error('wow');
}

example1(123).then(d=>console.log(d)).catch(e=>console.log(e));
example1('abc').then(d=>console.log(d)).catch(e=>console.log(e));

こんな感じに書けば良いだけ．．．．

次に処理待ちの場合はこんな感じです．

async function example2(a){
    if(Number.isInteger(a)){
        return a;
    }
    throw new Error('wow');
}
async function example3() {
    let result = await example2(123).then(d=>d);
    document.body.textContent = result;
}
example3();

async function example4() {
    let result = await example2('123').then(d=>d).catch(e=>e);
    document.body.textContent = result;
}
//example4();

非常にシンプルなコードです．こんな感じで取得することが出来るからPromiseを使ったコードを見なくなったのですね😁．

もっと詳しく知りたい方は下記の記事を参考にしてみてください．

https://qiita.com/soarflat/items/1a9613e023200bbebcb3

明日へ続く．

著者名  @taoka_toshiaki

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

投稿日時 2024年08月20 06:00日

タグ

async function example, asyncとawait, await, await example, body.textContent, catch, console.log, example, example1, example3, example4, if, let result, Number.isInteger, Promise, result, then, 出番, 同期, 関数,

asyncとawaitとthenの関係と使い道。

2021.01.27

Logging

asyncとawaitとthenの関係と使い道は？まず、関係性はこの3つでまぁ一つの役割を果たすと考えても良いかもしれません。どんな時に使うかは、例えば、innerHTMLに計算した値を渡したいとか…。いや違うな。同期処理として使うのが正解ですね。尚、asyncとawaitで同期処理とする。

ちなみにIE11では動かない処理なので氣をつけてご使用ください。今どき、IE11なんてと思うかもしれないけど、使っている人がいるから・・・。

document.getElementById("btn").addEventListener("click", async (e) => {
	test1();
	test2();
	test3();
	await test1();
	await test2();
	await test3();
});

function test1() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 1");
			resolve('1');
		}, 3000);
	});
}
function test2() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 2");
			resolve('2');
		}, 2000);
	});
}
async function test3() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 3");
			resolve('3');
		}, 100);
	});
}

IE11を使っているパターン、例えば社長や上司がシニア世代だったりするとIE11をいまだに使っていたりする。そもそもWindows10にIE11がインストールされている時点で悪だ・・・と思う開発者もいるはずです。そろそろマイクロソフト、IE11なんてものを強制的に削除するようなバージョンアップをして戴きたいと思ってます。それぐらい問題だと。あと、IE11で引っかかったことがあります。新しいブラウザでは下記のコードをHTMLに記入すると察してくれてjsファイルを読み込んでくれるが、IE11は違うのだ。

<script src="./assets/js/common.js"></script>

これじゃ読み込んでくれない。厳密に書かないとファイルを読み込んでくださらない。やっぱ早くIE11の撲滅を願う。

<script type="text/javascript" src="./assets/js/common.js"></script>

著者名  @taoka_toshiaki

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

投稿日時 2021年01月27 07:47日

タグ

'src', addEventListener, assets, async, asyncとawait, await, await test, common.js&quot, document.getElementById, gt, innerHTML, lt, quot, quot;btn, quot;text, resolve, setTimeout, then, 撲滅, 氣,