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とコマンドの入力からデータベースの削除、そして終了まで

推薦する

CentOS 7でsambaを使用してフォルダーを共有するための完全な手順

序文Samba は、サーバー プログラムとクライアント プログラムで構成され、Linux システム上...

MySQLウィンドウ関数の具体的な使用法

目次1. ウィンドウ関数とは何ですか? 1. ウィンドウをどのように理解しますか? 2. ウィンドウ...

MySQL 5.6.23 のインストールと設定環境変数のチュートリアル

この記事では、MySQL 5.6.23のインストールと設定のチュートリアルを参考までに紹介します。具...

MySQLトリガーの例の詳細な説明

目次トリガーとは何かトリガーを作成する複数の実行ステートメントを持つトリガーの作成制限と考慮事項要約...

LinuxシステムでFuserコマンドを使用する方法

Fuser コマンドとは何ですか? fuser コマンドは、特定のファイル、ディレクトリ、またはソケ...

MySQL が自動的に再起動する問題の解決方法

序文最近、テスト環境で MySQL データベースが自動的に再起動し続ける問題が発生しました。原因は、...

インデックススキャンを使用したMySQLソート

目次sakilaをインストールするインデックススキャンソートテーブル構造インデックススキャンをソート...

React サーバーサイドレンダリング原則の分析と実践

ほとんどの人は、サーバーサイド レンダリング (SSR と呼んでいます) の概念について聞いたことが...

JavaScript の知識: コンストラクタも関数である

目次1. コンストラクタの定義と呼び出し2. 新しいキーワードの目的3. コンストラクタの問題: メ...

Vue で動的に追加されたルーティング ページの更新時に失敗する理由と解決策

目次問題の説明シナリオインターフェースリターンフロントエンドメニューの定義vuex のメソッド問題原...

MySQLデータベースのスケジュールバックアップを実装する方法

1. シェルスクリプトを作成する vim バックアップdb.sh 次のようにスクリプトを作成します。...

MySQL での一時テーブルの使用例

ここ2日間ちょっと忙しくて、公式アカウントも数日更新が止まってしまいました。その結果、何人かの読者か...

小さなプログラムが天井に張り付いてしまう問題を完璧に解決するためにposition:stickyを使用する方法

最近、あるプロジェクトのクライアントが、上部に 2 つのタブ メニューを配置することを要求しました。...

JavaScript 構造化代入の詳細な説明

目次コンセプト配列の分割値を個別に宣言して割り当てるデフォルト値の構造化解除変数値の交換関数によって...