Promiseとは?

緒論

JavaScriptを使ったときに出てくる概念を整理しようとします.
一つ目はPromiseです.副刊からJavaScriptを学んだとき、約束の概念を学んだことをかすかに覚えています.

Promiseとは?

「約束」です!
しかしJavaScriptは非同期処理をよくしますAPI通信は典型的な非同期処理である.しかし、このように要求してページを描くと、データが来る前に画像を描くことができます!(非同期リクエストなので)
このため、Promiseにより要求に対する応答が受信され、それに応じて画面にデータが表示されたり、異常処理が行われたりする.
プロミスは「お願いが成功したら~やります」と言った.あるいは「失敗をお願いしたら、失敗の理由を見せてあげるから~」という約束.
つまり,Promiseにより,非同期タスクに対してトラフィック制御や異常処理が可能となる.

使用方法

まず.
「画面に表示されているデータをください.」APIリクエストの場合

export function detailArticle(id) {
    return axios.get(`${SERVER}/api/board/detail/${id}`, {
        headers: { token: ACCESS_TOKEN },
    });
}

このように表現することができます

成功時

then()を使用して、API要求が実行されたときに、データが到着したときに実行されるコードを作成する.

detailArticle(num)
  .then(res => {
  setArticle(res.data.data);
})

これにより、API要求が正しく実行されると、Articleにデータを書き込むことができる

失敗した場合

APIリクエストがcatch()の使用に失敗した場合、エラーが発生したときにエラーの原因が発生する可能性があります.

detailArticle(num)
  .catch(err => {
  console.log(err)
}
         });

もちろん一緒に使えます.

detailArticle(num)
  .then(res => {
  setArticle(res.data.data);
  .catch(err => {
    console.log(err)
  }
         });

MDNのPromiseフロー

次の文章の予告と意識の流れ

この記事では,JavaScriptでAPI通信を行う際にPromiseを使用することが望ましい理由について理解した.良い理由は流量をコントロールできることです!失敗の原因を知っているから!はい.
流量をコントロールできれば、流量が入ってからページを描くことができます!このように言うことができますが、「1回の非同期要求が成功した後に2回の非同期要求を行う」など、同期方法で非同期要求を書くことができます.
しかし、これに乗って入るコードがあれば、callback地獄のようなプロミス地獄に入ります.
この問題を防ぐために、async/awaitの文法が出てきましたが、次のJavaScriptの文章はそうだと思います.async/await文法はちょっと難しいですが、理解して書くのも便利で、人を楽に見せる文法なので、整理しておきたいと思います.