非同期を理解するまず、リクエストは非同期プロセスであることを理解する必要があります。 リクエストをサーバーに送信し、リクエスト結果を受信するまでに時間がかかるためです。 リクエストが完了するまで待機し、リクエストが完了した後にコールバックを実行して、受信したリクエスト結果を処理する必要があります。 フェッチ(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とコマンドの入力からデータベースの削除、そして終了まで
序文Samba は、サーバー プログラムとクライアント プログラムで構成され、Linux システム上...
目次1. ウィンドウ関数とは何ですか? 1. ウィンドウをどのように理解しますか? 2. ウィンドウ...
この記事では、MySQL 5.6.23のインストールと設定のチュートリアルを参考までに紹介します。具...
目次トリガーとは何かトリガーを作成する複数の実行ステートメントを持つトリガーの作成制限と考慮事項要約...
ルートジャンプ this.$router.push('/course'); this...
Fuser コマンドとは何ですか? fuser コマンドは、特定のファイル、ディレクトリ、またはソケ...
序文最近、テスト環境で MySQL データベースが自動的に再起動し続ける問題が発生しました。原因は、...
目次sakilaをインストールするインデックススキャンソートテーブル構造インデックススキャンをソート...
ほとんどの人は、サーバーサイド レンダリング (SSR と呼んでいます) の概念について聞いたことが...
目次1. コンストラクタの定義と呼び出し2. 新しいキーワードの目的3. コンストラクタの問題: メ...
目次問題の説明シナリオインターフェースリターンフロントエンドメニューの定義vuex のメソッド問題原...
1. シェルスクリプトを作成する vim バックアップdb.sh 次のようにスクリプトを作成します。...
ここ2日間ちょっと忙しくて、公式アカウントも数日更新が止まってしまいました。その結果、何人かの読者か...
最近、あるプロジェクトのクライアントが、上部に 2 つのタブ メニューを配置することを要求しました。...
目次コンセプト配列の分割値を個別に宣言して割り当てるデフォルト値の構造化解除変数値の交換関数によって...