1. ホーム
  2. Web プログラミング
  3. ジャバスクリプト
  4. javascriptのクラスライブラリ

fetch ネットワークリクエストラッパーの説明例

2022-01-13 04:42:52

export default ({
  url,
  method = 'GET',
  data = null,
}) => {
  // request configuration
  let options = {
    method
  }
  // When data is not empty, it is a post request
  if (data) {
    options = {
      ... . options,
      body: JSON.stringify(data),
      headers: {
        'content-type': 'application/json'
      }
    }
  }
  return fetch(url, options)
    .then(res => res.json())
    .then(data => data)
}
 

使用方法

ゲット

画像

ポスト 

<script type="module">
  import fetchApi from '. /js/fetch.js'
  const vm = new Vue({
    el: '#app',
    data: {
      users: []
    },
    // Initiate a network request
    mounted() {
      let url = 'http://localhost:3000/api/users'
      // fetchApi({ url }).then(data => console.log(data))
      fetchApi({ url, method: 'POST', data: { id: 200, name: 'aaa' } }).then(data => console.log(data))
    }
 
  })
</script>

上記は、フェッチネットワークリクエストラッピング例の詳細であり、フェッチネットワークリクエストラッピングに関する詳細な情報は、スクリプトの家の他の関連記事に注意を払うしてください!...