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

以下もご興味があるかもしれません: