fetch網(wǎng)絡(luò)請(qǐng)求封裝示例分析

本篇內(nèi)容主要講解“fetch網(wǎng)絡(luò)請(qǐng)求封裝示例分析”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“fetch網(wǎng)絡(luò)請(qǐng)求封裝示例分析”吧!

export default ({
  url,
  method = 'GET',
  data = null,
}) => {
  // 請(qǐng)求配置
  let options = {
    method
  }
  // data不為空時(shí)，它就是post請(qǐng)求
  if (data) {
    options = {
      ...options,
      body: JSON.stringify(data),
      headers: {
        'content-type': 'application/json'
      }
    }
  }
  return fetch(url, options)
    .then(res => res.json())
    .then(data => data)
}

使用

get

post 

<script type="module">
  import fetchApi from './js/fetch.js'
  const vm = new Vue({
    el: '#app',
    data: {
      users: []
    },
    // 發(fā)起網(wǎng)絡(luò)請(qǐng)求
    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>

到此，相信大家對(duì)“fetch網(wǎng)絡(luò)請(qǐng)求封裝示例分析”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！