vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ

I. ネイティブウェブリクエスト

1. XMLHttpRequest (w3c標準)   

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

当時は何でもかんでもコールバックだった、面倒くさすぎる

2. フェッチ   

// プロミスが存在するため、ネットワークリクエストを簡略化するため。

Fetchの使い方 - Web APIインターフェイスリファレンス｜MDN

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

パラメータ

1. 第1パラメータはURLです。

2. リクエストを設定する第2パラメータはオプションです

3、Promiseを使って結果/コールバックを返す。

fetch(url, options).then(res=>res.json()/text()).then(ret=>console.log(ret))

互換性の問題

ieの低バージョンがFetchと互換性がない場合は？ サードパーティのFetchライブラリを使用する [fetch-polyfill

ネットワークリクエストに fetch を使う let url1 url2 両方のアドレスを同時に実行して、関連するアクションを実行する Promise.all

let url1 成功しても失敗しても処理する Promise.finally

フェッチカバー <スパン ネットワークリクエストの読み込み

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

アクシオス

jsonデータをpromise型で返します。

ドキュメントをご覧ください。 使用説明書 - Axios中国語説明書 - クラウド参照

Axiosは、ブラウザやnode.jsで利用できるプロミスベースのHTTPライブラリです。

axiosは、vueの作者が推奨するWebリクエストライブラリでもあります。

// axios.get/post/put/delete
axios.get(url,config) // config can set the headers
axios.post(url,data,config)
axios.put(url,data,config)
axios.delete(url,data,config)

またはインスタンスリクエストによる

設定情報（よく使うもの）をリクエスト例で追加しよう

例によって一律に設定されていない（一般的に使用されていない）、誰にでも設定されているため

// set it uniformly for axios
axios.defaults.timeout = 10000
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.headers.a = 'admin'

ポスト投稿

// post submit
axios.post(url, { id: 1, name: 'aaaa' }).then(res => console.log(res.data))

 または、#標準的な書き方で直接アクシオス（これも一般的には使われませんが）

// axios directly with
axios({
  url,
  method:'get',
  data:{}
}).then(res => console.log(res))

インターセプターズ・スライス・プログラミング

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

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

axios.interceptors.request.use(config => {
  // Uniformly set the request domain address
  config.baseURL = 'http://localhost:3000'
  // Timeout time
  config.timeout = 1000
  // set header information
  config.headers.token = 'mytoken login'
  return config;
}, err => Promise.reject(err))

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

axios.interceptors.response.use(response => {
  return response.data
}, err => {
  // can be handled uniformly in the response interceptor, request exceptions
  alert('The request failed, please request it again')
  return Promise.reject(err)
});

上記は、ネットワーク要求スキームネイティブのネットワーク要求とJSネットワーク要求ライブラリの詳細であり、ネイティブのネットワーク要求とJSネットワーク要求ライブラリの詳細については、スクリプトホーム他の関連記事に注意を払うしてください