【学習ログ】JavaScript・Promiseの使い方まとめ

2020年10月29日2021年7月2日

こんにちは！chii（@tsurupiyoo）です！

今回はPromiseを使った処理についてまとめていきます。

JavaScript学び始めて「非同期処理ってなに？」という少し前の自分へ向けての記事となりますの！

同じように悩んでいる方の参考になれば嬉しいです！

Promiseとは？

非同期処理の結果をresolve（成功）とreject（失敗）で返すオブジェクトです。

＊非同期処理＊
JavaScriptの処理を効率化するための仕組み。
書いたコードが上から下に順番に処理されるのではなく、処理が終わった順に結果が表示される。

非同期処理だと書いた順番ではなく処理が終わった順に表示されます。
そうすると時間がかかる処理を先に書いた場合実行の順番が入れ替わってしまうことがあります！

Promiseを使えば「Aの処理が終わったらBの処理を実行してね」

という命令を出すことができます。

これで順番通りに処理を実行することができます。

Promiseの構文を確認しよう

①Promiseのオブジェクト生成は以下のように書きます。

new Promise ( )

ちなみにショートカットはこのように書きます↓

Promise.resolve()

②new Promise () このかっこの中に「resolve」「reject」を書きます。

new Promise((resolve, reject) => { 
resolve( );
 // or 
// reject(new Error( ));
 });

thenでresolveやrejectを受け取る

then(value => {
//第一引数
  console.log(value); // resolveの値
}, reason => {
//第二引数
  console.error(reason); //rejectの値
} );

thenは第一引数にresolveを受け取ります。
第二引数はrejectを受け取ります。
処理が成功したらresolveの値を出力し、失敗したらrejectの値を出力します。

例題で実際に書いてみる

前回DOM操作で作ったこちらをPromiseで書いてみます

あわせて読みたい

【学習ログ】JavaScriptのDOM操作！要素の追加のやり方こんにちはつるぴよ（@tsurupiyoo）です。現在もりけん塾（）でJavaScriptの勉強中です。今回はJavaScriptのDOM操作についてあらためてまとめていこうと思います！＼...

コードはこのようになります。

まずはHTMLに空のulを準備

<div>
  <ul></ul>
</div>

JavaScriptでulの値を取得

const ul = document.querySelector('ul');

定数「items」にPromiseオブジェクトを格納する

const items = new Promise ((resolve, reject) => {
 //処理が成功したら渡す値をresolveに書いていく
 resolve( 
  [{ a: ”pengin” , img: "img/pengin.png" ,alt: "画像1" ,text:"pengin"},
   { a: ”dog” , img: "img/dog.png" ,alt: "画像2" ,text:"dog"}]);
//処理が失敗したら渡す値をrejectに書いていく
reject('エラーです');
}) ;

ここまでの状態では処理はまだ実行されません。

thenを使ってコールバック処理をする

Promiseオブジェクトは定数「items」に格納されています。
Promiseオブジェクトの中の「resolve」に入れた配列を「then」に渡して処理を書いていきます。

items.then((value) => {
 value.forEach((e) => {
  const li = document.createElement('li');
  const a = document.createElement('a');
  const img = document.createElement('img');
  
  a.href = e.a;
  img.src = e.img;
  li.textcontents = e.text;

  ul.appendChild(li).appendChild(a).appendChild(img);
 });
});

これで最初の例で出したペンギンと犬のリストを表示することができます！