fetch网络请求封装示例详解

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了fetch网络请求封装示例详解脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

export default ({
  url,
  method = 'GET',
  data = null,
}) => {
  // 请求配置
  let options = {
    method
  }
  // data不为空时,它就是post请求
  if (data) {
    options = {
      ...options,
      body: JSON.stringify(data),
      headers: {
        'content-tyPE': 'application/json'
      }
    }
  }
  return fetch(url, options)
    .then(res => res.json())
    .then(data => data)
}
 

使用@H_777_8@

get

post 

<script type="module">
  import fetchApi From './js/fetch.js'
  const vm = new Vue({
    el: '#app',
    data: {
      users: []
    },
    // 发起网络请求
    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>

以上就是fetch网络请求封装示例详解的详细内容,更多关于fetch网络请求封装的资料请关注脚本宝典其它相关文章

脚本宝典总结

以上是脚本宝典为你收集整理的fetch网络请求封装示例详解全部内容,希望文章能够帮你解决fetch网络请求封装示例详解所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: