ES6 使用Promise封装fetch库(增删改查)

最新推荐文章于 2024-05-31 10:34:50 发布
最新推荐文章于 2024-05-31 10:34:50 发布
阅读量638 收藏 2
点赞数 2
分类专栏： JavaScript 文章标签： post json promise fetch
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21531681/article/details/108931071
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
		// 使用Promise封装fetch库(增删改查)
			class EasyHttp{
				// 封装get 请求
				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'
							}
						})
					
					.then(res => res.json())
					.then(data => resolve('数据删除成功！'))
					.catch(err => reject(err))
				})
				}
			}

			const http = new EasyHttp;

			// get请求数据

			http.get('http://jsonplaceholder.typicode.com/users')
				.then((data) => {
					console.log(data)
				})
				.catch(err => console.log(err))

			//post

			const data = {
				name:"xiangming",
				username:"小明",
				email:"1231231@qq.com"
			}
			http.post('http://jsonplaceholder.typicode.com/users',data)
				.then((data) => console.log(data))
				.catch(err => console.log(err))

			//put
			http.put('http://jsonplaceholder.typicode.com/users/2',data)
				.then((data) => console.log(data))
				.catch(err => console.log(err))

			//delete
			http.delete('http://jsonplaceholder.typicode.com/users/2')
				.then((data) => console.log(data))
				.catch(err => console.log(err))

		</script>
	</head>
	<body>
		
	</body>
</html>
不走小道
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
如何利用ES6进行Promise封装总结
01-19
原生Promise解析 简介 promise是异步编程的一种解决方案，比传统的解决方案–回调函数和事件–更合理和强大。 promise简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果，从语法...
使用Promise封装wx.request wx.setStorage封装，实现设置过期时间
05-11
在微信小程序开发中，我们经常会...以上就是对`wx.request`和`wx.setStorage`进行Promise封装，以及实现设置过期时间的知识点详解。通过这样的封装，我们可以更优雅地处理小程序中的异步操作，提升代码可读性和维护性。
一篇文章搞懂Promise基本用法
stars0306的博客
01-31 681
一篇文章搞懂Promise基础用法
ES6第七天学习fetch增删改查
qq_43712187的博客
11-03 487
fetch封装:easyhttp.js /* * 分析：封装fetch:更快，更简单的请求数据 * @version 1.0.0 * @author yanmeiliang1 * @liense * */ class EasyHttp{ //get请求方式 get(url){ return new Promise((resolve,rej...
面试常考：Promise的用法，以及fetch的原理
最新发布
2402_85402030的博客
05-31 1350
Promise是一个构造函数，用来生成Promise实例。实例代表一个异步操作的最终完成（或失败）及其结果值。Promise有三种状态：Resolved（已完成）：成功状态，表示操作成功完成。Rejected（已失败）：失败状态，表示操作失败。Pending（等待中）：初始状态，既没有被成功（resolved）也没有被拒绝（rejected）。那么，怎么用Promise来解决上面那个问题呢？再这里，我们用到的是是JavaScript用来启动一个异步任务并处理其结果的方式。Promise。
fetch封装(增删改查)
周家大小姐
09-27 1805
html: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&
es6 fetch库封装
qq_34870529的博客
07-09 700
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
Fetch简单封装
YY11230的博客
02-01 805
Fetch简单封装
小程序使用es6封装ajax源码案例
06-25
在这个“小程序使用es6封装ajax源码案例”中，我们将深入探讨如何利用ES6的Promise和模块化特性来优雅地实现Ajax请求，并将其应用到微信小程序的开发中。 首先，让我们理解一下核心概念： 1. **ES6**：这是...
fetch-retry:使用重试功能扩展任何获取库
05-01
重试向Fetch API添加重试功能。 它包装任何Fetch API程序包（例如： ， ， 等），试由于网络... require ( 'es6-promise' ) . polyfill ( ) ;var originalFetch = require ( 'isomorphic-fetch' ) ;var fetch = requ
一个微小的ES6fetch包装不需要对API大动干戈
08-10
在“一个微小的ES6 fetch包装”中，我们探讨的是如何通过简单的封装，使得`fetch`更加易用，同时保持其灵活性。 首先，`fetch` API的基本用法是接收一个URL和一个可选的配置对象。例如，获取JSON数据通常需要设置`'...
ES7 async封装fetch库(增删改查)
大壮
10-05 1278
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> // 使用Promise封装fetch库(增删改查) class EasyHttp{ // 封装get 请求 async get(url){
基于Promise async实例封装fetch Apis实例
逆袭的菜鸟X
01-21 652
在看实例之前我们首先明确三个es6中的概念。 Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。 async和await是es7中提出来的更加优雅的一种异步编程解决方案。 Fetch API提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个......
【ES6】fetch函数和Promise
qq_22744093的博客
09-01 1136
在这个例子中，我们首先向https://api.example.com/data发起一个GET请求。如果解析失败，或者在任何其他步骤中发生错误，我们捕获这个错误并打印错误信息。注意，fetch并不直接返回请求的结果，而是返回一个Promise。它返回一个Promise，这个Promise在请求成功时解析为Response对象，或者在请求失败时拒绝。在这个例子中，我们使用async/await语法来等待Promise解析。这使得我们的代码看起来更像是同步的代码，但是实际上它仍然是异步的。
ES6-fetch的用法
热门推荐
Primise7的博客
05-15 1万+
事实标准，并不存在与ES6规范中，基于Promise实现。 目前项目中对Promise的兼容性尚存在问题，如果在项目中应用fetch，需要引入es6-promise和fetch。 当我们谈及Ajax技术的时候，通常意思就是基于XMLHttpRequest的Ajax，它是一种能够有效改进页面通信的技术。 XMLHttpRequest的最新替代技术——Fetch API， 它是W3C...
前端基础建设与架构17 学习 axios：封装一个结构清晰的 Fetch 库
fegus的博客
09-14 907
本讲我们在开篇分析了代码设计、代码分层的方方面面，一个好的设计一定是层次明晰，各司其职的，一个好的设计也会直接帮助业务开发提升效率。封装和设计，是编程领域亘古不变的经典话题，需要每名开发者下沉到业务开发中体会、思考。本小节的后半部分，我们从源码入手，分析了 axios 的优秀设计思想。即便你在业务中没有使用过 axios，但对于 axios 的学习始终是必要且重要的。主要内容总结如下：最后，给大家布置一个思考题：axios 支持请求取消能力，这是如何实现的呢？欢迎在留言区和我分享你的观点。
ES6中新的AJAX解决方案：Promise、Fetch、Response、Axios
m0_53881899的博客
09-12 1156
Promise、Fetch、Response：ES6中新的AJAX解决方案
小程序用Promise封装（get,put,post,delete）请求库
weixin_42178050的博客
10-14 620
https://www.cnblogs.com/l-y-c/p/12667071.html
es6 promise封装
10-11
可以使用ES6的Promise来封装异步操作。Promise是一种用于处理异步操作的对象，它可以代表一个异步操作的最终完成或失败。下面是一个简单的示例： ``` function fetchData() { return new Promise((resolve, reject) => { // 异步操作 setTimeout(() => { // 模拟异步操作成功 const data = 'This is the fetched data'; resolve(data); // 模拟异步操作失败 //reject(new Error('Failed to fetch data')); }, 2000); }); } // 调用封装的异步操作 fetchData() .then(data => { console.log(data); }) .catch(error => { console.error(error); }); ``` 在上面的示例中，`fetchData`函数返回一个Promise对象，该对象包装了一个异步的数据获取操作。通过`.then()`方法可以在异步操作成功后获取数据，通过`.catch()`方法可以在异步操作失败时捕获错误。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不走小道

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值