深入理解ES6中的Promise

最新推荐文章于 2024-05-24 18:15:02 发布
最新推荐文章于 2024-05-24 18:15:02 发布
阅读量123 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cocboo/article/details/82321253
版权 
<!DOCTYPE html>
<html>
<head>
	<title>Promise</title>
</head>
<body>
<script type="text/javascript">

//promise用法(返回异步方法返回的数据,resolve获取数据成功后调用的方法, reject获取数据失败后调用的方法)

//第一种写法
	var p = new Promise((resolve,reject) => {
		//模拟ajax请求异步获取数据
		setTimeout(() => {
			let name = 'lindont';
			resolve(name); //成功调用的函数
			//reject('error'); //失败调用的函数
		},1000);
	});

	p.then((data) => {
		console.log(data);
	});


//第二种写法
	var getData = (resolve,reject) => {
		setTimeout(() => {
			let name = 'HuangHaoXin';
			resolve(name);
		},1000);
	}

	var p2 = new Promise(getData);

	p2.then((data) => {
		console.log(data);
	});


//async 和 await (async可以将一个同步的方法改为异步方法, await具有阻塞功能变相把一个异步方法变成同步方法, await必须用在async方法中)

//第一种写法
	var getData2 = async () => {
		console.log(2);
		return 'async data'
	}

	var test = async () => {
		console.log(1);
		var d = await getData2();
		console.log(d);
		console.log(3);
	}

	test(); //结果按顺序输出 1 2 3,说明await等待getData2方法执行完毕再往下执行(即自定义一个异步方法，使用await等待另一个异步方法执行完毕，此时异步方法变相成为了同步)


//第二种写法
	var getData3 = () => {
		return new Promise((resolve,reject) => {
			setTimeout(() => {
				var username = '黄浩新很帅';
				resolve(username);
			},1000);
		});
	}

	var test2 = async () => {
		var data = await getData3();
		console.log(data);
	}

	test2();


</script>
</body>
</html>

 

极夜之光
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6中Promise的理解
人间草木
09-18 506
Promise的含义 Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供...
对于ES6-promise的理解
77今天也学习了的博客
07-27 183
/* 尽可能还原 Promise 中的每一个 API, 并通过注释的方式描述思路和原理. */ // # Promise是什么？主要用来干嘛？实现思路是什么？为什么？ // 1,Promise是一个类，为什么要给它定义成一个类呢？可以通过new创建，new创建都会分配新的内存，都会执行构造器 // 2,为什么会有Promise,Promise用来干嘛？ // js是单线程执行机制，为了避免队列阻塞，存在异步模式[请求接口,setInterval,setTimeout,…]，而异步模式会存在回调情况。 //
ES6中的Promise对象的理解
weixin_33743661的博客
10-06 113
Promise的含义promise是异步编程的一种解决方法。所谓promise，简单说是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果，从语法上说，promise是一个对象，从它可以获取异步操作的消息，promise提供了统一的API，各种异步操作都可以用同样的方法进行处理。Promise对象的特点（1）对象的状态不受外界影响，promise对象代表一个异步操作，有三种状态...
ES6之Promise详解
最新发布
xllllll___的博客
05-24 689
1.语法：在语法上async/await提供了更简洁 ，更直观的一个语法，使异步代码更易读和维护。2.错误处理：在async/await中，可以直接使用try...catch来捕获异常,而在Promise中，则需要使用catch。3.代码流程：async/await可以使得异步代码看起来更像一个同步代码，易于阅读和理解。
ES6 Promise的理解
前端起步博客
03-23 162
Promise 的概念 Promise是对JavaScript异步编程的一种解决方案，由于传统异步编程的一大特点是不断的回调嵌套，使得代码难以维护。于是Promise使用一种链式调用去解决这个问题。 Promise的状态和特点 它具有三种状态： pending 未完成 resolved 已完成（成功） rejected 已失败 一个Promise对象代表一个异步操作，可把Promise当作一个...
ES6 promise理解
断了的弦的博客
08-06 1132
Promise 的含义 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。 ES5实现：https://www.cnblogs.com/malingyang/p/6535805.html Promise实现串行调用，判断多个图片异步加载完成： Prom...
深入理解ES6 Promise 扩展always方法
08-29
深入理解ES6 Promise 扩展always方法 ES6 Promise 扩展always方法是ES6 Promise的一个重要扩展，允许开发者在Promise对象中执行一些通用的操作，无论Promise对象最终是成功还是失败。本文将详细介绍ES6 Promise ...
深入解析ES6中的promise
12-11
ES6中的promise对象很早就听说过，据说是为了解决我们使用回调产生回调地狱的问题。今天下午既然有这么想学的欲望，就来看一看吧，当然参考的还是阮一峰老师的教程。 第一部分：什么是Promise 　看本文的最后一个...
出入前端必学，深入理解ES6
02-22
**深入理解ES6** ES6，全称ECMAScript 6，是JavaScript语言的一个重要版本更新，它引入了大量的新特性，极大地提升了开发效率和代码质量。这篇文章将带你深入理解ES6的关键知识点，帮助你更好地掌握前端开发必备...
es6-promise@4.1.1.zip
06-18
**ES6 Promise 深入理解与应用** 在JavaScript中，由于其单线程的特性，同步执行的代码会按照顺序依次处理，这在处理I/O密集型任务时容易导致阻塞，使得用户界面无法及时响应。为了解决这个问题，Promise（承诺）...
简单理解ES6的Promise
许小叮当的博客
05-18 663
简单理解ES6的Promise 文章目录简单理解ES6的Promise前言Promise怎么用ES7的async和await总结 前言 Promise是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间就会给你一个结果 Promise可以保证异步请求变得有顺序执行 概念：Promise是ES6中的新语法，本身是一个构造函数；每个new出来的Promise实例对象，都代表一个异步操作 作用： 解决了回调地狱问题(
ES6中promise的浅理解
qq_44193064的博客
04-14 664
一.promise的理解 1.Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。 2.所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息...
ES6 Promise深度理解
Zijeak的博客
10-11 231
1.Promise对象初探 Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。 promise.then(function(value) { // success }, function(error) { // failure }); 2.有关Promise、then的执行时机 Promise 新建后就会立即执行。 then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行。 let promise = new Promise(f
ES6中的promise深入理解
qq_29199021的博客
11-07 207
ES6中，Promise对象可以理解为一次执行的异步操作，使用Promise对象之后可以使用一种链式调用方法来组织代码，让代码更加直观。 在使用ajax发送请求后拿到数据，往往要将数据传送到其他请求中，那么就需要编写这样的代码： $.ajax({ url: '', dataType: 'json', success: function (data) { //获取数据后将数...
ES6对Promise的初步理解
m0_58636858的博客
10-20 122
Promise是异步编程的一种解决方案，Promise是一个对象，可以获取一步操作的消息，他的出现大大改善了异步编程的困难，避免了回调地狱，它比传统的回调函数更合理，更强大。 所谓Promise，简单来说就是一个容器，里面曹存折某个未来才会结束的事件，通常是一个异步操作的结果。从语法上说，Promise就是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方式进行处理。 （1）Promise的实例有三个状态： ① Pending （进行中） ② Reso
深入理解ES6里的promise
weixin_33674437的博客
12-15 131
一、ES6 Promise是什么？ 　　复杂的概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么呢？是一个类？对象？数组？函数？ 　　别猜了，直接打印出来看看吧，console.dir(Promise)，就这么简单粗暴。 　　这么一看就明白了，Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原...
对于 ES6 Promise 的个人理解
qq_45233592的博客
07-08 189
说到Promise，我的第一反应其实是回调地狱，来看看下面这段代码应该就是典型的回调地狱了 var fn = function(){ var t1 = setTimeout( ()=>{ var t2 = setTimeout( ()=>{ var t2 = setTimeout( ()=>{ console.log(2); },2000 ) console.log(3) },2000) console.log(1); },2000) } fn(
解读ES6 Promise
白瑕 的博客
09-07 151
详解ES6 Promise异步 文章目录详解ES6 Promise异步前言一、Promise是什么呢...二、resolve三、reject四、then() & catch()五、all总结 前言 我打算先解释resolve和reject这两个方法, 因为then()和catch()负责接收resolve和reject方法的返回物,这样可能会更好理解些,然后all方法这多少有点规格外,我们最后说. 一、Promise是什么呢… 一种异步编程解决方案,多用于一般很耗时的网络请求(JS是单线程语言
探索ECMAScript 2015：深入理解ES6
"深入浅出ES6 - 一本关于...尽管新技术层出不穷，但只有深入理解和掌握它们，才能在实践中发挥其价值。《深入浅出ES6》正是为了帮助开发者做到这一点，通过系统的学习，提升对ES6的理解，从而更好地应用在实际项目中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值