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的实现方法
您可能感兴趣的文章:
相关文章
- export default ({ url, method = 'GET', data = null, }) => { // 请求配置 let options = { method } // data不为空2021-12-17
- body部分： <button>开关灯</button> script部分： <script> // window.onload 是窗口加载事件，可以实现将代码写到元素2021-12-17
- 本文实例为大家分享了vue实现注册页效果 的具体代码，供大家参考，具体内容如下 一、实现效果图 ?? 二、实现代码 1、实现头部 <template>2021-12-17
- 依赖性注入是一种技术，它允许我们注入一个特定类的依赖对象，而不是直接创建这些实例。 使用依赖注入的好处显而易见，它通过放松模块间的耦2021-12-17
- 目录前言环境准备Category组件App组件一、默认插槽二、具名插槽三、作用域插槽总结前言 插槽可以说是 Vue 中非常重要的一部分吧，在我学习和2021-12-17
- 目录首先我们需要搭建好页面布局JS功能1JS功能2JS功能3JS功能4效果图如下： 首先我们需要搭建好页面布局 html的代码如下： ? <div class=2021-12-17
- 本文实例为大家分享了vue实现手机验证码登录的具体代码，供大家参考，具体内容如下 验证码 <template> <div> <el-main> <el-f2021-12-17
解析.netcore项目中IStartupFilter使用教程
背景： netcore项目中有些服务是在通过中间件来通信的，比如orleans组件。它里面服务和客户端会指定网关和端口，我们只需要开放客户端给外界2021-12-17- 目录前言URL格式前提条件方法1 使用环境变量方法2 使用命令行参数方法3 使用配置文件方法4 使用UseUrls方法5 使用Kestrel优先级总结前言 在使2021-12-17
- 目录一、 函数内 this 的指向1、普通函数2、构造函数3、对象方法4、事件绑定方法5、定时器函数6、立即执行函数二、改变函数内部 this 指向1、2021-12-17
最新评论