カタログ
React Vernacular Campaignシリーズの第3回目へようこそ！今回は、JavaScriptの非同期操作について深く掘り下げ、AsyncとAwaitという2つの重要なキーワードを紹介します。 この記事では、実際の例を通して非同期操作の概念を示すとともに、Promise、Fetch、Async、Awaitを使って非同期コードをより効果的に処理する方法を紹介します。この記事では、非同期操作の概念と、Promise、Fetch、Async、Awaitを使って非同期コードをより効果的に処理する方法を紹介します。
序文
最近のウェブ開発において、非同期処理はますます重要になってきています。この記事では、基本的な概念から始め、非同期操作の原則と、非同期状況に対処するための高度なJavaScript構文の使い方について説明します。
この投稿は非同期JavaScriptについてです。
- 非同期
- Promise & Fetch
- Async & Await
- プロミス・オブジェクトの構築
非同期
非同期は開発において必要不可欠な概念であり、以前のコードでは、プログラムが順次実行されることを意味するSynchronous（同期）の概念であった。
しかし、ウェブページを開発する過程で、時には非同期アクションを実行する必要があります。例えば、ユーザーが次のフォームをクリックして送信すると、データ転送の終了を待って、サーバーからデータを返してもらい、成功したかどうかを知る必要があります。
サーバーが結果を返す前に、画面の成否をJavaScriptで直接実行するのは間違いだ。
最近のJavaScriptには、PromiseやAsync & Awaitなど、非同期実行を扱う構文もある。
Promise & Fetch
Promise
非同期リクエストには通常成功と失敗の2つの結果がありますが、実際にはFulfilled、Rejected、Pendingの3つの状態があります。Promiseオブジェクトは、非同期リクエストが実行されたときの現在の状態を明確にします。
Fetch
fetch関数が利用できるようになる前は、APIデータの取得はかなり面倒で、20行以上のコードを要することもあった。 しかし、ECMAはより便利にするためにfetch構文を追加し、わずか数行で「APIの取得」データを完了できるようにした。
直接apiの例で例を行うには、ネットのこちら側で無料のapiを見つける！
https://api.thecatapi.com/v1/images/search
読者がブラウザに直接入力すると、id、url、width、heightを含むリターンオブジェクトが表示される。
APIデータを取得するコードはどのように使用するのですか？
fetch("https://api.thecatapi.com/v1/images/search") .then(res=>res.json) .then(console.log) .catch(console.error)
ここでは、fetch関数を使い、引数としてURLを渡すだけで、あとはcatch関数で実行したい順番にプログラムを実行することができる。
上記のコードでは、まずapiをタイプし、最初のthen関数で戻り結果を取得し、2番目のthen関数でメッセージを出力する。最後に、catch関数を通して、失敗した場合は失敗メッセージを出力する。
Async & Await
JavaScript Async
より一般的で広く使われているもうひとつの非同期構文は、AsyncとAwaitの非同期関数を使うことである。これはPromiseとFetchよりもずっと簡潔で理解しやすく、私たちの読書習慣に合っている。
上記のフェッチをasync & await構文に書き換えると、次のようになる。
const getCatData = async() => { let res = await fetch("https://api.thecatapi.com/v1/images/search") let { results } = await res.json() console.log(results) } getCatData() /* [ { id: "ac5", url: "https://cdn2.thecatapi.com/images/ac5.jpg", 幅: 565, 高さ: 551 } ] */
関数の最初の行でasyncキーワードを使って、これが非同期関数であることをコンピュータに伝え、非同期関数の完了を待つ必要のある非同期リクエストの前にawaitキーワードを追加するだけでよい。 では、どうやって失敗メッセージを受け取るのか？ tryとcatchの構文をasyncとawaitに追加するだけで、まずtryの中でコードを実行し、catchの中でPromiseの失敗ステータスを処理することができる。
const getCatData = async() => { try { let res = await fetch("https://api.thecatapi.com/v1/images/search") let { results } = await res.json() console.log(結果) } catch (エラー) { console.log(error) } } getCatData()
プロミス・オブジェクトの構築
前述したように、PromiseにはFulfilled、Rejected、Pendingの3つの状態がありますが、結果という意味ではすべてSuccessとFailureの2つの結果にまとめることができます。 そのため、非同期関数を実行する際に、実行結果を送り返すこともでき、Promiseオブジェクトを使ってそれを保存することができます。
const getCatData = () => new Promise((解決、拒否) => { const api = "https://api.thecatapi.com/v1/images/search" const request = new XMLHttpRequest; request.open("GET ", api); request.onload = () => { request.status === 200 ?solves(JSON.parse(request.response).results) :拒否(Error(request.statusText)) } request.onerror = err => 拒否(err); request.send() })
結語
この記事では、非同期の概念といくつかの実用的な作業について説明したが、非同期自体は難しい概念であり、構文の一部は少し難しいので、読者はこの記事をブックマークすることを歓迎します、あなたは将来的にこのコンテンツを見直すために戻って来ることができます。何か提案や質問があれば、遠慮なくコメントを残してほしい！ この記事が気に入ったら、「いいね！」や「シェア」をクリックして、より多くの人に見てもらえるようにしてください。
その他のReact関連記事
React ホワイトペーパーキャンペーン 01-JavaScript ES6
React ホワイトペーパーキャンペーン02-JavaScript ES6 オブジェクト
なぜ大企業はNxを使うのか？ モノレポツール 5分のクイックセットアップ
日本語 
繁體中文 
English 
简体中文 
한국어 
Español