jsフェッチ非同期リクエストの使用の詳細な例

jsフェッチ非同期リクエストの使用の詳細な例

非同期を理解する

まず、リクエストは非同期プロセスであることを理解する必要があります。

リクエストをサーバーに送信し、リクエスト結果を受信するまでに時間がかかるためです。

リクエストが完了するまで待機し、リクエストが完了した後にコールバックを実行して、受信したリクエスト結果を処理する必要があります。

フェッチ(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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript はフェッチを使用して非同期リクエストメソッドを実装します。例

<<:  docker cp ファイルをコピーしてコンテナに入る

>>:  MySQLでよく使われるSQLとコマンドの入力からデータベースの削除、そして終了まで

推薦する

MLSQLコンパイル時権限制御例の詳細な説明

序文MySQL の権限を簡単に理解すると、MySQL では自分の能力の範囲内で操作が許可され、その限...

フロントエンドコンポーネント化の基礎知識を詳しく解説

目次コンポーネントの基本概念オブジェクトとコンポーネントの違い成分属性属性とプロパティ属性:財産:ク...

Web デザインのための 5 つのシンプルな XHTML Web フォーム

Web デザイン 5 におけるシンプルな XHTML Web フォーム。 テクニック 1: ラベル ...

Vue3における非親子コンポーネント通信の詳細な説明

目次最初の方法アプリ.vueホーム.vueホームコンテンツ.vueデータの応答性レスポンシブプロパテ...

ゲーム着物メモ問題の簡単な分析

本日、ゲームを再起動した後、バックアップしたデータをターゲットデータベースにインポートできないことが...

MySQL で null を置き換える IFNULL() および COALESCE() 関数の詳細な説明

MySQLではisnull()関数をnull値の代わりとして使用することはできません。次のように:ま...

Ubuntu 18.04 は mysql 5.7.23 をインストールします

以前、Ubuntu 16.04 に MySQL をスムーズにインストールしました。今回、Ubuntu...

JavaScript のクロージャによって発生する問題を回避する

閉鎖による問題を回避するためのletについてオブジェクト指向の考え方を使用して、購入者情報の削除機能...

Docker イメージの最適化 (1.16GB から 22.4MB)

目次最適化の第一歩: 軽量ベースイメージの使用第2段階の最適化:多段階構築Docker は、ソフトウ...

Vue バッチ更新 DOM 実装手順

目次シーン紹介深い応答性トリガーゲッターDep.targetを探すゲッターセッター要約するシーン紹介...

関数の分類の詳細な説明とJavascriptでのこのポイントの例

JS で関数を定義する 3 つの方法例を挙げて説明しましょう。 <スクリプト> //メソ...

Linux システムで .sh ファイルを実行する方法

Linux システムで .sh ファイルを実行する方法は 2 つあります。たとえば、ルート ディレク...

ショートカットアイコンとアイコンコードの違いの紹介

ステートメント 1: <link rel="shortcut icon" ...

Ubuntu 18.04 のすべての Python ライブラリを一度にアップグレードする方法

ピップとは何かpip は、Python パッケージの検索、ダウンロード、インストール、アンインストー...

CSS3のvar()を使用して実行時にscss変数の値を変更する詳細な説明

var() の紹介と使用法詳細 (MDN) IEは無効ですが、他の主流のブラウザは有効ですvar()...