🌐

Promiseについて学んでみる

JboyHashimoto

2022/04/24に公開

JavaScript

Ajax

tech

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塾、基本情報技術者の本がお勧めです🧑🏼‍🎓
デイスパッチ何それ?

Promiseとは?

最後に

Discussion