フェッチネットワークリクエストのカプセル化例の詳細な説明

エクスポートデフォルト（{
  URL、
  メソッド = 'GET'、
  データ = null、
}) => {
  // リクエスト構成 let options = {
    方法
  }
  // データが空でない場合はPOSTリクエストです if (data) {
    オプション = {
      ...オプション、
      本文: JSON.stringify(データ),
      ヘッダー: {
        'コンテンツタイプ': 'アプリケーション/json'
      }
    }
  }
  fetch(url, オプション) を返します
    .then(res => res.json())
    .then(データ => データ)
}
 

<スクリプトタイプ="モジュール">
  './js/fetch.js' から fetchApi をインポートします。
  定数vm = 新しいVue({
    el: '#app',
    データ： {
      ユーザー: []
    },
    // ネットワーク要求を開始するmounted() {
      url = 'http://localhost:3000/api/users' とします。
      // fetchApi({ url }).then(data => console.log(data))
      fetchApi({ url, メソッド: 'POST', データ: { id: 200, 名前: 'aaa' } }).then(data => console.log(data))
    }
 
  })
</スクリプト>