ES6中Fetch的封装及使用,炒鸡简单~
之前写过一篇《ajax、axios、fetch之间的详细区别以及优缺点》 戳这里
1.封装 (http.js)
class Ajax {
get(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then(res => res.json())
.then(data => resolve(data))
.catch(err => reject(err))
})
}
// post方式
post(url, data) {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'POST',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(data => resolve(data))
.catch(err => reject(err))
})
}
//put 修改
put(url, data) {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'PUT',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(data => resolve(data))
.catch(err => reject(err))
})
}
//delete
delete(url, data) {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'DELETE',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(data => resolve('数据删除成功!'))
.catch(err => reject(err))
})
}
}
export default new Ajax();//ES6导出
2.调用
import http from "./http.js"//引入方式 这里用的是ES6的方法,需要babel配合webpack打包
//普通引入使用src引入之后 const http = new Ajax(); 即可
// get请求数据
http.get('http://jsonplaceholder.typicode.com/users')
.then((data) => {
console.log(data)
})
.catch(err => console.log(err))
// post传输数据
const data = {
name: 'candy',
username: 'candy',
email: 'htmlcs@163.com'
};
//post user
http.post('http://jsonplaceholder.typicode.com/users', data)
.then(data => console.log(data))
.catch(err => console.log(err))
// update user ,修改后会发现修改后ID为2的数据会变成上页面定义的data
http.put('http://jsonplaceholder.typicode.com/users/2', data)
.then(data => console.log(data))
.catch(err => console.log(err))
//delete user 删除下标为2里的数据
http.delete('http://jsonplaceholder.typicode.com/users/2', data)
.then(data => console.log(data))
.catch(err => console.log(err))
这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头
那么问题来了,如果你也想入坑前端或者学习更多技术,广交天下朋友(基友),认识更多有趣的灵魂的话,欢迎加入前端交流群鸭~
扫二维码加为好友就完事了!安排~
ES6中Fetch的封装及使用,炒鸡简单~的更多相关文章
- 炒鸡简单的canvas粒子(山东数漫江湖)
位图的canvas一直不会被svg比下去的原因了. 俗话说,须弥芥子,是大小之说,也有以小见大之说,颗颗粒子,足以构建宏大效果. 这是一篇炒鸡简单的canvas粒子教程,主要是讲如何粒子特效的原理,一 ...
- Redux系列02:一个炒鸡简单的react+redux例子
前言 在<Redux系列01:从一个简单例子了解action.store.reducer>里面,我们已经对redux的核心概念做了必要的讲解.接下来,同样是通过一个简单的例子,来讲解如何将 ...
- 炒鸡简单的javaScript的call和apply方法
解释一 作者:杨志 链接:https://www.zhihu.com/question/20289071/answer/14644278 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商 ...
- Python制作动态二维码只需要一行代码!炒鸡简单!
分享一个比较有意思的项目,只需要一行Python代码就可以快捷方便生成普通二维码.艺术二维码(黑白/彩色)和动态GIF二维码. 用法比较简单,直接通过pip安装即可. pip3 install myq ...
- 啊啊啊啊啊啊啊今天就写,炒鸡简单 数据库Sqlite的创建,库的增删改查
啦啦啦啦啦啦啦 写这个不用多长时间,我直接写代码注释都是些语句,Sql语句和Api来操作数据库 ,语句的参数我会注释 SQLite数据库创建数据库需要使用的api:SQLiteOpenHelper必须 ...
- 利用ES6中的Proxy和Reflect 实现简单的双向数据绑定
利用ES6中的Proxy (代理) 和 Reflect 实现一个简单的双向数据绑定demo. 好像vue3也把 obj.defineProperty() 换成了Proxy+Reflect. 话不多说 ...
- ES6中的数组方法扩展
上一篇文章小编简单介绍了在ES6中,一些常用的方法和一些简单的应用,在这篇文章中,小编将针对ES6中数组常用方法进行扩展,相信经过这篇文章之后,每一位小伙伴下班时间会有所提前,就算从原来的996变成9 ...
- 现代JavaScript—ES6+中的Imports,Exports,Let,Const和Promise
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://www.freecodecamp.org/news/learn-modern-jav ...
- ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
随机推荐
- js中常见的数据加密与解密的方法
加密在我们前端的开发中也是经常遇见的.本文只把我们常用的加密方法进行总结.不去纠结加密的具体实现方式(密码学,太庞大了). 常见的加密方式 常见的加密算法基本分为这几类, 线性散列算法(签名算法)MD ...
- touch多点触摸事件
touch--单点 targetTouches. changeTouches 多点: targetTouches--当前物体上的手指数 *不同物体上的手指不会互相干扰 不需要做多点触摸的时候---平均 ...
- 一夜搞懂 | JVM 线程安全与锁优化
前言 本文已经收录到我的 Github 个人博客,欢迎大佬们光临寒舍: 我的 GIthub 博客 学习导图 一.为什么要学习内存模型与线程? 之前我们学习了内存模型和线程,了解了 JMM 和线程,初步 ...
- Java调用ARM模板执行Azure Rest建立VM过程
Azure Resource Manager 提供一致的管理层,用于管理通过 Azure PowerShell.Azure CLI.Azure 门户.REST API 和开发工具执行的任务,所有工具使 ...
- Navicat安装教程
Navicat安装教程 1.下载: 链接:https://pan.baidu.com/s/1uLlstPYrsjaNhZqVu9aFfQ 提取码:393r 2.下载完成之后如图所示: 首先安装第二个, ...
- Hadoop(十一):组合任务概述和格式
组合任务概述 一些复杂的任务很难由一个MR处理完成,所以一般需要将其拆分成为多个简单的MR子任务来执行. MapReduce框架中对于这类的问题提供了几种方式进行任务执行流程的控制,主要包括以下几种方 ...
- websocket聊天室
目录 websocket方法总结 群聊功能 基于websocket聊天室(版本一) websocket方法总结 # 后端 3个 class ChatConsumer(WebsocketConsumer ...
- javascript 入门 select2
要说这select2,还真是我......,也不是难,反正就对不了!!! 我博客看了一下牛,愣是对不了,后来硬着头看着官方文档,终于出来了. 注意: 1.调用的jquery库一定要能用,网上很多不能用 ...
- .Net Core结合AspNetCoreRateLimit实现限流
前言 相信使用过WebApiThrottle的童鞋对AspNetCoreRateLimit应该不陌生,AspNetCoreRateLimit是一个ASP.NET Core速率限制的解决方案,旨在控制客 ...
- 【题解】LOJ2462完美的集合(树DP 魔改Lucas)
[题解]LOJ2462完美的集合(树DP 魔改Lucas) 省选模拟考这个??????????????????? 题目大意: 有一棵树,每个点有两个属性,一个是重量\(w_i\)一个是价值\(v_i\ ...