Promiseについて学んでみる
Promiseとは?
MDNのサイト
Promiseオブジェクトは非同期処理を扱える機能です。よく見かける「().then」これですね。
以前は、「何これ?、意味わからんわ!」ってなってました。
どう使えばいいのか?
非同期処理をするとき、つまりajaxを使ったりFirebase SDK JSを使う時ですね。
Qiitaで書いた記事ですが、参考までにどうぞ。
こちらは、色々作ったサンプルの一例です。
index.js
/*Promiseで直列処理をしたい
外部データを取得して後続処理に繋げたいとき
*/
Promise.resolve()
.then(() => {
new Promise((resolve) => {
setTimeout(() => {
console.log('1つ目のPromise', new Date().toLocaleTimeString());
resolve();
}, 1000);
})
})
.then(
() => new Promise((resolve) => {
setTimeout(() => {
console.log('2つ目のPromise', new Date().toLocaleTimeString());
resolve();
}, 1000);
})
);
// await・asyncを使った記述
start();
async function start() {
await new Promise((resolve) => {
setTimeout(() => {
console.log('1つ目のPromise', new Date().toLocaleTimeString());
resolve();
}, 1000);
});
await new Promise((resolve) => {
setTimeout(() => {
console.log('2つ目のPromise', new Date().toLocaleTimeString());
resolve();
}, 1000);
});
}
Chromeのブラウザのコンソールにコピペして実行
実行結果
1つ目のPromise 14:06:52
1つ目のPromise 14:06:52
2つ目のPromise 14:06:52
2つ目のPromise 14:06:53
Ajaxを使うにはどうすればいいのか?
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Promise</h1>
<script>
fetch('https://jsonplaceholder.typicode.com/users/')
.then((data) => data.json())
.then((obj) => {
console.log(obj)
})
</script>
</body>
</html>
スクリーンショット
async awaitというものもある
こちらの方がよく使われているようです🤔
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>async awaitの場合</h1>
<p>短くかけるよ!</p>
<script>
async function load() {
// ファイルを読み込む
const data = await fetch('https://jsonplaceholder.typicode.com/users/');
// JSONとして解析
const obj = await data.json();
console.log(obj);
}
// 関数を実行する
load();
</script>
</body>
</html>
スクリーンショット
最後に
最近は、axiosというものを使ってajaxを行うようで、勉強しすぎなくてもいいみたいです。
概念を理解すれば良い。
HTTP通信の知識が必要なので、get、post、put、deleteのメソッドの意味を理解するところから始めないとReactとDjangoでアプリ作ったときに、「get何それ?」って混乱します😵💫
初学者がやりがちなプログラミング言語から勉強ではなくて、Web系エンジニア目指すならWebの知識が必要です。
HTTP、TCP/IP、OSI参照モデル?、専門用語多すぎ!!!!
キタミ式イラストIT塾、基本情報技術者の本がお勧めです🧑🏼🎓
デイスパッチ何それ?
最新版
こちらの書籍を読めばWeb通信について理解できるのでお勧めです🧑🏼🎓
Author And Source
この問題について(Promiseについて学んでみる), 我々は、より多くの情報をここで見つけました https://zenn.dev/joo_hashi/articles/7ed240e0c541d9著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol