fetch网络请求封装示例详解

 更新时间:2021-12-17 12:01:52   作者:佚名   我要评论(0)




export default ({
url,
method = 'GET',
data = null,
}) => {
// 请求配置
let options = {
method
}
// data不为空

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

您可能感兴趣的文章:
  • 基于axios封装fetch方法及调用实例
  • fetch 如何实现请求数据
  • 详解React Native网络请求fetch简单封装
  • JavaScript利用fetch实现异步请求的方法实例
  • vue项目中使用fetch的实现方法

相关文章

  • fetch网络请求封装示例详解

    fetch网络请求封装示例详解

    export default ({ url, method = 'GET', data = null, }) => { // 请求配置 let options = { method } // data不为空
    2021-12-17
  • 利用js实现简单开关灯代码

    利用js实现简单开关灯代码

    body部分: <button>开关灯</button> script部分: <script> // window.onload 是窗口加载事件,可以实现将代码写到元素
    2021-12-17
  • 用vue实现注册页效果?vue实现短信验证码登录

    用vue实现注册页效果?vue实现短信验证码登录

    本文实例为大家分享了vue实现注册页效果 的具体代码,供大家参考,具体内容如下 一、实现效果图 ?? 二、实现代码 1、实现头部 <template>
    2021-12-17
  • 三种方法解决ASP.NET?Core?6中的依赖项

    三种方法解决ASP.NET?Core?6中的依赖项

    依赖性注入是一种技术,它允许我们注入一个特定类的依赖对象,而不是直接创建这些实例。 使用依赖注入的好处显而易见,它通过放松模块间的耦
    2021-12-17
  • 解决父子组件通信的三种Vue插槽

    解决父子组件通信的三种Vue插槽

    目录前言环境准备Category组件App组件一、默认插槽二、具名插槽三、作用域插槽总结前言 插槽可以说是 Vue 中非常重要的一部分吧,在我学习和
    2021-12-17
  • JavaScript仿小米官网注册登录功能的实现

    JavaScript仿小米官网注册登录功能的实现

    目录首先我们需要搭建好页面布局JS功能1JS功能2JS功能3JS功能4效果图如下: 首先我们需要搭建好页面布局 html的代码如下: ? <div class=
    2021-12-17
  • vue实现手机验证码登录

    vue实现手机验证码登录

    本文实例为大家分享了vue实现手机验证码登录的具体代码,供大家参考,具体内容如下 验证码 <template> <div> <el-main> <el-f
    2021-12-17
  • 解析.netcore项目中IStartupFilter使用教程

    解析.netcore项目中IStartupFilter使用教程

    背景: netcore项目中有些服务是在通过中间件来通信的,比如orleans组件。它里面服务和客户端会指定网关和端口,我们只需要开放客户端给外界
    2021-12-17
  • ASP.NET Core设置URLs的五种方法

    ASP.NET Core设置URLs的五种方法

    目录前言URL格式前提条件方法1 使用环境变量方法2 使用命令行参数方法3 使用配置文件方法4 使用UseUrls方法5 使用Kestrel优先级总结前言 在使
    2021-12-17
  • JavaScript函数this指向问题详解

    JavaScript函数this指向问题详解

    目录一、 函数内 this 的指向1、普通函数2、构造函数3、对象方法4、事件绑定方法5、定时器函数6、立即执行函数二、改变函数内部 this 指向1、
    2021-12-17

最新评论