非同期を理解するまず、リクエストは非同期プロセスであることを理解する必要があります。 リクエストをサーバーに送信し、リクエスト結果を受信するまでに時間がかかるためです。 リクエストが完了するまで待機し、リクエストが完了した後にコールバックを実行して、受信したリクエスト結果を処理する必要があります。 フェッチ(url)学習の便宜上、uni-app チュートリアルの API インターフェースを借用します。 定数 url = 'https://unidemo.dcloud.net.cn/api/news' fetch は Promise に基づいて設計されていることを知っておく必要があります。理解できない場合は、まず es6 Promise を学習することをお勧めします。 fetch(url) は get リクエストを直接送信することができ、それ自体が Promise です。 Promise なので、.then コールバックを使用できます。試してみましょう。 fetch(url).then(res => { コンソール.log(res) }) 何が返されるのでしょうか?それは応答です。 レスポンスは、いくつかのリクエストパラメータを返すカプセル化されたオブジェクトです。 より便利な例は status です。これは、リクエストのステータス コードが 200 であり、リクエストが正常に送信されたことを示します。 GET リクエストを送信したので、最も気になるのは、要求されたデータがどこにあるかということです。 レスポンス.json()心配しないでください。レスポンスのプロトタイプをクリックすると、json メソッドが見つかります。 このメソッドも Promise を返すことをお伝えします。 次に、次のコールバックのためにこの Promise を返すことができます。 次のステップでは、結果を出力して結果を確認します。 fetch(url).then(response => { response.json() を返す }).then(res => { コンソール.log(res) }) 必要なデータはここにあることがわかりました。 asyncとawaitを組み合わせる上記のリクエストを行うために fetch を使用してコールバックを実行することもできますが、コールバックを使用するとコードのエレガントさが失われます。 ただし、非同期関連のキーワード async と await を知っていれば、別の書き方もあります。 関数に async を追加すると、関数は非同期関数になり、その中で await を使用して、コードに非同期操作 Promise を待機させ、コールバック結果を返すことができます。これは、非同期を同期に変えるという意味を持ちます。 const fetchAPI = 非同期() => { const レスポンス = フェッチ(url) を待機 const データ = 応答.json() を待機します コンソール.log(データ) } フェッチAPI() 例外処理そして、最初のステップの応答のステータス コードを使用して、次のステップを正常に実行できるかどうかを判断できます。 const fetchAPI = 非同期() => { const レスポンス = フェッチ(url) を待機 応答ステータス === 200 の場合 const データ = 応答.json() を待機します コンソール.log(データ) }それ以外{ console.log('リクエスト例外') } } フェッチAPI() 次に、予期しない状況をより厳密に考慮するために、try-catch を使用して例外をキャプチャします。 const fetchAPI = 非同期() => { 試す { const レスポンス = フェッチ(url) を待機 応答ステータス === 200 の場合 const データ = 応答.json() を待機します コンソール.log(データ) } それ以外 { console.log('リクエスト例外') } } キャッチ (エラー) { コンソール.log(エラー) } } フェッチAPI() 投稿リクエストfetch の 2 番目の入力パラメータはオブジェクトであり、これはリクエストの構成パラメータです。 リクエストメソッドを post に設定でき、リクエストヘッダーと post 入力パラメータも設定できます。 フェッチ(url, { メソッド: "POST", ヘッダー: { 'コンテンツタイプ': 'application/json', ... }, 本文: JSON.stringify({ 'キー': 値、 ... }) }) 要約するjs fetch 非同期リクエストの使用に関するこの記事はこれで終わりです。js fetch 非同期リクエストの使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: docker cp ファイルをコピーしてコンテナに入る
>>: MySQLでよく使われるSQLとコマンドの入力からデータベースの削除、そして終了まで
序文MySQL の権限を簡単に理解すると、MySQL では自分の能力の範囲内で操作が許可され、その限...
目次コンポーネントの基本概念オブジェクトとコンポーネントの違い成分属性属性とプロパティ属性:財産:ク...
Web デザイン 5 におけるシンプルな XHTML Web フォーム。 テクニック 1: ラベル ...
目次最初の方法アプリ.vueホーム.vueホームコンテンツ.vueデータの応答性レスポンシブプロパテ...
本日、ゲームを再起動した後、バックアップしたデータをターゲットデータベースにインポートできないことが...
MySQLではisnull()関数をnull値の代わりとして使用することはできません。次のように:ま...
以前、Ubuntu 16.04 に MySQL をスムーズにインストールしました。今回、Ubuntu...
閉鎖による問題を回避するためのletについてオブジェクト指向の考え方を使用して、購入者情報の削除機能...
目次最適化の第一歩: 軽量ベースイメージの使用第2段階の最適化:多段階構築Docker は、ソフトウ...
目次シーン紹介深い応答性トリガーゲッターDep.targetを探すゲッターセッター要約するシーン紹介...
JS で関数を定義する 3 つの方法例を挙げて説明しましょう。 <スクリプト> //メソ...
Linux システムで .sh ファイルを実行する方法は 2 つあります。たとえば、ルート ディレク...
ステートメント 1: <link rel="shortcut icon" ...
ピップとは何かpip は、Python パッケージの検索、ダウンロード、インストール、アンインストー...
var() の紹介と使用法詳細 (MDN) IEは無効ですが、他の主流のブラウザは有効ですvar()...