Vue ネットワークリクエストスキームネイティブネットワークリクエストと js ネットワークリクエストライブラリ

1. ネイティブネットワークリクエスト

1. XMLHttpRequest (W3C 標準)

// 約束がない場合の製品

その時は、全て呼び戻されて、面倒でした。

2. フェッチ

//promise に基づいて html5 によって提供されるオブジェクト。promise が存在するため、ネットワークリクエストを簡素化するために使用されます。

Fetch の使用 - Web API リファレンス | MDN

Fetch は新しい Ajax ソリューションです。Fetch は Promise オブジェクトを返します。 Fetch は、Ajax をさらにカプセル化したものではなく、ネイティブ js であり、XMLHttpRequest オブジェクトを使用しません。

パラメータ:

1. 最初のパラメータは URL です。

2. 設定リクエストの2番目のパラメータはオプションパラメータです

3. 結果/コールバックを処理するためにPromiseを使用して返す

フェッチ(url、オプション)、次に(res=>res.json()/text())、次に(ret=>console.log(ret))

互換性の問題:

IE の下位バージョンが Fetch と互換性がない場合はどうすればいいですか? =》サードパーティのFetchライブラリ[fetch-polyfill]を使用する

fetch を使用してネットワークリクエストを作成します。関連する操作を実行する前に、url1 url2 が両方のアドレスを同時に実行できるようにします。Promise.all

let url1 正常に実行されるかどうかに関係なく、Promise.finallyを処理する必要があります。

fetchはネットワークリクエストをカプセル化する

2. js ネットワークリクエストライブラリ

アクシオス

JSON データを Promise 型として返します。

ドキュメント: 説明書 · Axios 中国語説明書 · Kanyun

Axios は、ブラウザと node.js で使用できる promise ベースの HTTP ライブラリです。

リクエストとレスポンスをインターセプトし、JSON データを自動的に変換できます。 Axios は、Vue の作者が推奨するネットワークリクエストライブラリでもあります。

// axios.get/post/put/delete
axios.get(url,config) // config はヘッダー情報を設定できます axios.post(url,data,config)
axios.put(URL、データ、設定)
axios.delete(url、データ、設定)

またはインスタンス経由でリクエストする

インスタンスリクエストで設定情報（共通）を追加！

全員に対して設定されるので、インスタンス間で一律に設定しないでください（一般的には使用されません）。

// axios の axios.defaults.timeout = 10000 を設定します
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.headers.a = '管理者'

投稿送信

// 投稿の送信 axios.post(url, { id: 1, name: 'aaaa' }).then(res => console.log(res.data))

または、axios は # 標準の書き方を直接使用します (一般的には使用されません)

// axios は axios({ を直接使用します
  URL、
  メソッド:'get',
  データ：{}
}).then(res => console.log(res))

インターセプターアスペクトプログラミング

(パイプライン) (ミドルウェア)

1. リクエストインターセプター（複数回呼び出すことができます）

axios.interceptors.request.use(config => {
  // リクエストドメイン名アドレスの統一設定 config.baseURL = 'http://localhost:3000'
  // タイムアウト config.timeout = 1000
  // ヘッダー情報を設定する config.headers.token = 'mytoken login'
  設定を返します。
}, err => Promise.reject(err))

2. レスポンスインターセプター（処理、フィルタリング）

axios.interceptors.response.use(レスポンス => {
  応答データを返す
}, エラー => {
  // これをレスポンスインターセプターで一様に処理できます。リクエスト例外アラート（「リクエストに失敗しました。再度リクエストしてください」）
  Promise.reject(err) を返します。
});

上記は、ネットワークリクエストソリューションのネイティブネットワークリクエストと js ネットワークリクエストライブラリの詳細です。ネイティブネットワークリクエストと js ネットワークリクエストライブラリの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

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