🌐

Promiseについて学んでみる

2022/04/24に公開約3,900字

Promiseとは?

MDNのサイト

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promiseオブジェクトは非同期処理を扱える機能です。よく見かける「().then」これですね。
以前は、「何これ?、意味わからんわ!」ってなってました。

どう使えばいいのか?
非同期処理をするとき、つまりajaxを使ったりFirebase SDK JSを使う時ですね。

Qiitaで書いた記事ですが、参考までにどうぞ。

https://qiita.com/JunichiHashimoto/items/842f2cb612cae44764b0

こちらは、色々作ったサンプルの一例です。
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塾、基本情報技術者の本がお勧めです🧑🏼‍🎓
デイスパッチ何それ?

最新版

https://www.amazon.co.jp/キタミ式イラストIT塾-基本情報技術者-令和04年-きたみ-りゅうじ/dp/4297124513

こちらの書籍を読めばWeb通信について理解できるのでお勧めです🧑🏼‍🎓

https://www.amazon.co.jp/Webを支える技術-HTTP、URI、HTML、そしてREST-WEB-PRESS-plus/dp/4774142042/ref=sr_1_2_sspa?adgrpid=52846719243&gclid=CjwKCAjwx46TBhBhEiwArA_DjInCHk0WTp5IrLi5DD5bts_fg-PxEPZ3mqmmrQ44k0l1tyAah7KBBhoCmkoQAvD_BwE&hvadid=553902346777&hvdev=c&hvlocphy=1009717&hvnetw=g&hvqmt=e&hvrand=9644796910460987315&hvtargid=kwd-333749887651&hydadcr=16039_13486741&jp-ad-ap=0&keywords=webを支える技術&qid=1650777467&sr=8-2-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUExNkdCUUxTTEJQRzVIJmVuY3J5cHRlZElkPUEwNTk4OTU5MzdCRVNIMlg2UzBQSCZlbmNyeXB0ZWRBZElkPUExWU1NQUlSUzQ0N05UJndpZGdldE5hbWU9c3BfYXRmJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ==

Discussion

ログインするとコメントできます