fetch网络请求封装示例详解

 更新时间:2021年11月23日 16:04:12   作者:tby_37  
这篇文章主要介绍了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)
}
 

使用

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网络请求封装的资料请关注脚本之家其它相关文章!

相关文章

  • vue中如何实现pdf文件预览的方法

    vue中如何实现pdf文件预览的方法

    这篇文章主要介绍了vue中如何实现pdf文件预览的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue实现放大镜效果

    vue实现放大镜效果

    这篇文章主要为大家详细介绍了vue实现放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • Vue分页组件的封装方法

    Vue分页组件的封装方法

    这篇文章主要为大家详细介绍了Vue分页组件的封装方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue使用swiper插件实现轮播图的示例

    vue使用swiper插件实现轮播图的示例

    这篇文章主要介绍了vue使用swiper插件实现轮播图的示例,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-05-05
  • Vue基本使用之对象提供的属性功能

    Vue基本使用之对象提供的属性功能

    这篇文章主要介绍了Vue基本使用之对象提供的属性功能实例详解,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-04-04
  • 对vuex中store和$store的区别说明

    对vuex中store和$store的区别说明

    这篇文章主要介绍了对vuex中store和$store的区别说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • VUE中鼠标滚轮使div左右滚动的方法详解

    VUE中鼠标滚轮使div左右滚动的方法详解

    这篇文章主要给大家介绍了关于VUE中鼠标滚轮使div左右滚动的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • vue中监听input框获取焦点及失去焦点的问题

    vue中监听input框获取焦点及失去焦点的问题

    这篇文章主要介绍了vue中监听input框获取焦点,失去焦点的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • vue拖拽添加的简单实现

    vue拖拽添加的简单实现

    本文主要介绍了vue拖拽添加的简单实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • vue如何自定义事件传参

    vue如何自定义事件传参

    这篇文章主要介绍了vue如何自定义事件传参,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05

最新评论