Promise入门

最新推荐文章于 2022-11-17 22:07:00 发布
最新推荐文章于 2022-11-17 22:07:00 发布
阅读量103 收藏
点赞数
文章标签： javascript webpack 前端 ViewUI
原文链接：https://juejin.im/post/5aa1fce051882555677e21aa
版权

众所周知的，Javascript是一种单线程的语言，所有的代码必须按照所谓的“自上而下”的顺序来执行。本特性带来的问题就是，一些将来的、未知的操作，必须异步实现（关于异步，我会在另一篇文章里进行讨论）。本文将讨论一个比较常见的异步解决方案——Promise，时至本文最后更新的日子，Promise的应用已经极其广泛。

Promise解决的问题

我相信每个前端都遇到过这样一个问题，当一个异步任务的执行需要依赖另一个异步任务的结果时，我们一般会将两个异步任务嵌套起来，这种情况发生一两次还可以忍，但是发生很多次之后，你的代码就会变成这个熊样：

	async1(function(){
		async2(function(){
			async3(function(
				async4(funciton(){
					async5(function(){
						//(╯°□°）╯︵┻━┻
						//...
					});
				});
			));	
		});
	});
复制代码

这就是所谓的回调地狱，代码层层嵌套，环环相扣，很明显，逻辑稍微复杂一些，这样的程序就会变得难以维护。

对于这种情况，程序员们想了很多解决方案（比如将代码模块化），但流程控制上，还是没有掏出})的大量嵌套。但去年ES2015的标准里，Promise的标准化，一定程度上解决了JavaScript的流程操作问题。

Promise的基本用法

时至今日，很多现代浏览器都已经实现，但是为了兼容，建议自行对Promise进行封装或者使用第三方的解决方案（如webpack对es6语法进行编译）。 那么，我么将得到一个Promise构造函数，新建一个Promise的实例：

	var _promise = new Promise(function(resolve, reject){
		setTimeout(function(){
			var rand = Math.random();
			if(rand<0.5){
				resolve("resolve" + rand);
			}else{
				reject("reject" + rand);
			}
		},1000);
		
	});
	
	/*运行结果:
	 *有两种情况：
	 *1)无事发生
	 *2)报错形如：d.js:7 Uncaught (in promise) reject0.9541820247347901
	 */
	
复制代码

由上所示，Promise的构造函数接收一个函数作为参数，该函数接受两个额外的函数，resolve和reject，这两个函数分别代表将当前Promise置为fulfilled(解决)和rejected(拒绝)两个状态。Promise正是通过这两个状态来控制异步操作的结果。接下来我们将讨论Promise的用法，实际上Promise上的实例_promise是一个对象，不是一个函数。在声明的时候，Promise传递的参数函数会立即执行，因此Promise使用的正确姿势是在其外层再包裹一层函数。

	
	var run = function(){
		var _promise = new Promise(function(resolve, reject){
			setTimeout(function(){
				var rand = Math.random();
				if(rand<0.5){
					resolve("resolve" + rand);
				}else{
					reject("reject" + rand);
				}
			},1000);
		});
		return _promise;
	}
	run();
复制代码

这是Promise的正常用法，接下来，就是对异步操作结果的处理，接着上面创建的函数run()

	run().then(function(data){
		console.log(data);
	});
复制代码

每个Promise的实例对象，都有一个then的方法，这个方法就是用来处理之前各种异步逻辑的结果。

那么, 各位可能会问， 这么做有什么卵用？

当然有用，到目前为止，我们学会了Promise的基本流程，但是这种用法和嵌套回调函数似乎没什么区别，而且增加了复杂度。但是我们说了，Promise的用处，实际上是在于多重异步操作相互依赖的情况下，对于逻辑流程的控制。Promise正是通过对两种状态的控制，以此来解决流程的控制。请看如下代码：

	run().then(function(data){
		//处理resolve的代码
		cosnole.log("Promise被置为resolve",data);
	},function(data){
		//处理reject的代码
		cosnole.log("程序被置为了reject",data);
	})
复制代码

如果异步操作获得了我们想要的结果，那我们将调用resolve函数，在then的第一个作为参数的匿名函数中可以获取数据，如果我们得到了错误的结果，调用reject函数，在then函数的第二个作为参数的匿名函数中获取错误处理数据。 这样，一个次完整的Promise调用就结束了。对于Promise的then()方法，then总是会返回一个Promise实例，因此你可以一直调用then，形如run().then().then().then().then().then()..... 在一个then()方法调用异步处理成功的状态时，你既可以return一个确定的“值”，也可以再次返回一个Promise实例，当返回的是一个确切的值的时候，then会将这个确切的值传入一个默认的Promise实例，并且这个Promise实例会立即置为fulfilled状态，以供接下来的then方法里使用。如下所示：

	run().then(function(data){
		console.log("第一次",data);
		return data;
	}).then(function(data){
		console.log("第二次",data);
		return data;
	}).then(function(data){
		console.log("第三次",data);
		return data;
	});
	/* 异步处理成功的打印结果：
		第一次 resolve0.49040459200760167d.js:18 
		第二次 resolve0.49040459200760167d.js:21 
		第三次 resolve0.49040459200760167
		由此可知then方法可以无限调用下去。
	*/
复制代码

根据这个特性，我们就可以将相互依赖的多个异步逻辑，进行比较顺序的管理了。下面举一个拥有3个异步操作的例子，代码有些长。

	//第一个异步任务
	function run_a(){
		return new Promise(function(resolve, reject){
			//假设已经进行了异步操作，并且获得了数据
			resolve("step1");
		});
	}
	//第二个异步任务
	function run_b(data_a){
		return new Promise(function(resolve, reject){
			//假设已经进行了异步操作，并且获得了数据
			console.log(data_a);
			resolve("step2");
		});
	}
	//第三个异步任务
	function run_c(data_b){
		return new Promise(function(resolve, reject){
			//假设已经进行了异步操作，并且获得了数据
			console.log(data_b);
			resolve("step3");
		});
	}
	
	//连续调用
	run_a().then(function(data){
		return run_b(data);
	}).then(function(data){
		return run_c(data);
	}).then(function(data){
		console.log(data);
	});
	
	/*运行结果
	  step1
	  step2
	  step3
	*/
	
复制代码

这样，连续依赖的几个异步操作，就完成了，解决了让人头痛的回调地狱问题。

异步操作拒绝及终止调用链

前文提到过，then方法可以接收两个匿名函数作为参数，第一个参数是Promise置为fulfilled状态后的回调，第二个是置为rejected状态的回调。在很多情况下，如果连续的几个异步任务，其中某个异步任务处理失败，那么接下来的几个任务很大程度上就不需要继续处理了，那么我们该如何终止then的调用链呢？在Promsie的实例上，除了then方法外，还有一个catch方法，catch方法的具体作用，我们沿用上面的代码，将run_a()改造一下来看：

	//修改run_a的一步操作可能存在拒绝状态
	function run_a(){
		return new Promise(function(resolve, reject){
			setTimeout(function(){
				if(Math.random()>.5){
					resolve("step1");
				}else{
					reject("error");
				}
			},1000);
		});
	}
	
	//这样做不会终止
	run_a().then(function(data){
		return run_b(data);
	},function(data){
		//如果是这样处理rejected状态，并不会终止调用链
		return data;
	}).then(function(data){
		return run_c(data);
	}).then(function(data){
		console.log(data);
	});
	
	//在调用链的末尾加上catch方法，当某个环节的Promise的异步处理出错时，将终止其后的调用，直接跳到最后的catch
	run_a().then(function(data){
		return run_b(data);
	}).then(function(data){
		return run_c(data);
	}).then(function(data){
		console.log(data);
	}).catch(function(e){
		//rejected的状态将直接跳到catch里，剩下的调用不会再继续
		console.log(e);
	});
复制代码

以上代码简单描述了如何终止链式调用，值得注意的是，catch方法还有try catch的作用，也就是说，then里面的逻辑代码如果出现了错误，并不会在控制台抛出，而是会直接有catch捕获。

ES6对Promise/A+的扩展

Promise的提出的时间很早，其标准称为Promise/A+，内容不多，ES6将Promise写入了标准，并在其基础上进行了扩展，具体可以参考：

· 由malcolm yud对Promise/A+的翻译 · 阮一峰ES6入门—Promise

这里将讲一下ES6对Promise标准的扩展，也可以直接看上面的参考链接

Promise.all的扩展

本扩展实现了将多个异步操作合并为一个操作，也就是并行处理异步，最后统一操作结果，注意:本方法只能通过Promise对象直接调用，实例不能进行此操作。

all()接收一个参数数组，数组中的每一项都对应一个

	//第一个异步任务
	function run_a(){
		return new Promise(function(resolve, reject){                
			//假设已经进行了异步操作，并且获得了数据
			resolve("step1")
		});
	}
	//第二个异步任务
	function run_b(){
		return new Promise(function(resolve, reject){
			//假设已经进行了异步操作，并且获得了数据
			resolve("step2");
		});
	}
	//第三个异步任务
	function run_c(){
		return new Promise(function(resolve, reject){
			//假设已经进行了异步操作，并且获得了数据
			resolve("step3");
		});
	}
	
	Promise.all([run_a(),run_b(),run_c()]).then(function(data){
		console.log(data);
	},function(data){
		console.log(data);
	});
	/*打印结果
	  ["step1","step2","step3"]
	*/
	
	//修改第二个异步任务
	//第一个异步任务
	function run_b(){
		return new Promise(function(resolve, reject){                
			//假设已经进行了异步操作，并且获得了数据
			reject("step2")
		});
	}
	/*打印结果
	 *捕获了第一个出现的拒绝状态的数据
	  ["step2"]
	*/
复制代码

由上所示，并行运算的结果将按照入参顺序放在放在数组里返回。

Promise.race的扩展

race本意为赛跑，顾名思义，race的用法就是并列的几个异步操作，谁先处理结束就以谁为准。

	//第一个异步任务
	function run_a(){
		return new Promise(function(resolve, reject){
			setTimeout(function(){
                console.log("执行到step1");                
                resolve("step1")
			},3000);
		});
	}
	//第二个异步任务
	function run_b(){
		return new Promise(function(resolve, reject){
            setTimeout(function(){
                console.log("执行到step2");
                resolve("step2");
            },1000);
		});
	}
	//第三个异步任务
	function run_c(){
		return new Promise(function(resolve, reject){
            setTimeout(function(){
                console.log("执行到step3");
                resolve("step3");
            },3000);
		});
	}

    Promise.race([run_a(),run_b(),run_c()]).then(function(results){
        console.log(results);
    },function(data){
        console.log(data);
    });
    /*
    	打印结果: 
    	执行到step2
		step2
		执行到step1
 		执行到step3
    */
复制代码

可以看出，run_b先执行完，进入了then函数进行回调，但需要注意的是，第一个结束的异步操作回调后，其它的异步操作还会继续执行，只是并不会继续进入then了而已。

结语

以上就是对ES6标准下的Promise的简单理解，Promise出现的时间不短，在很多开源项目里被广泛应用，理解了Promise，有助于对代码的进一步理解。本篇文章作为我个人的学习记录，希望起到抛砖引玉的作用，对大家的学习起到点点作用。

转载于:https://juejin.im/post/5aa1fce051882555677e21aa

weixin_33774308
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Promise基础入门
06-12
Promise基础入门
angularPromise:Angular Promise 入门模板
07-07
#Angular 承诺课程示例
Promise用法总结
qq_50384924的博客
06-03 1万+
Promise是ES6的新特性,是异步编程的一种解决方案 从语法上说,Promise是一个对象,从它可以获取异步操作的消息,可以解决回调地狱(回调地狱嵌套回调函数) Promise的含义:本身不是异步,是封装异步操作容器,统一异步的标准 Promise对象的特点:对象的状态不受外界影响,一旦状态改变，就不会再变，任何时候都可以得到这个结果 一.前引 js中的异步操作有哪些 ajax请求 var xhr = new XMLHttpRequest(); xhr.onreadystatechange=fu
Promise的使用方法
Be myself
03-27 2830
PS~：Promise是一个构造函数，自己身上有all、reject、resolve等几个方法，原型上有then、catch等几个方法。 Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。 一、Promise有以下三种状态: pending: 初始状态，既不是成功，也不是失败状态 , ( 等待中 , 或者进行中 , 表示还没有得到结果 ) fulfi...
promise
CrystalLee
09-05 647
一、含义 Promise对象有以下两个特点。 （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。 （2）一旦状态改变，就...
Promise的使用大全(请求数据和调用方法--多种写法)
南下有你
09-15 4543
一、promise的含义和作用 Promise 异步操作之后会有三种状态 pending:等待状态，比如正在进行网络请求，或者定时器没有到时间 fullfill:满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then() reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且回调.catch() 二、什么情况会用到promise 一般情况下有一步请求时，使用promise对这个异步操作进行封装 new -> 构造函数（1.保存了一些状态信息 2.执行传
imooc-promise-sample:幕课网Promise入门视频源码（https-源码网
03-24
imooc-promise-sample 幕课网Promise入门视频源码（ 目录 跟随视频的讲解顺序，可直接替换至代码页
Promise js从入门到实战全套教程
10-17
Promise 是异步编程的一种解决方案，比传统的解决方案回调函数, 更合理和更强大。ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象 。本视频主打，包括Promise基础语法、手写Promise、async与await 以及 ...
Promise.rar
07-02
Promise从入门到自定义
Promise的基本使用
qq_51219425的博客
03-15 4107
一、初始Promise 抽象表达: Promise 是一门新的技术(ES6 规范) Promise 是 JS 中进行异步编程的新解决方案 备注：旧方案是单纯使用回调函数 具体表达: 从语法上来说: Promise 是一个构造函数 从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/ 失败的结果值 为什么要用 Promise? 指定回调函数的方式更加灵活 支持链式调用, 可以解决回调地狱问题 promise的基本流程 实例代码说明： 调用函数resolve()、
Promise的使用详解与细节分析
weixin_47342392的博客
09-20 1646
Promise的使用详解与细节分析
Promise的使用及用法详解
热门推荐
嘿，小明的博客
06-30 1万+
Promise的基本使用及用法详解
Promise_基本语法
PURPLESWEETTTTT的博客
11-17 828
Promise_三种状态和值 三种状态 (pending: 准备； resolved(或者fulfilled) 成功； rejected： 失败
Promise的用法
weixin_36215102的博客
08-21 365
终于意识到要写博客的第一天 我终于意识到写博客的重要性，哎，现在开始也不太晚吧，总比不开始强 今天主要弄明白以下几个问题吧 1、关于promise、aysnc/await、Generator/yield的使用以及原理 2、关于vue的生命周期、插槽、computed/watch原理、数据绑定原理、vue打包过程等几个常见的vue问题 3、web前端安全，XSS、CRSF攻击及其防御手段 1 p...
promise的基本用法
sunlando的博客
09-17 5956
promise的用法 promise是一个构造函数，自身有all，resolve，reject等方法，原型上有then，catch等方法。并且它new的实例对象特包含这些方法。通常将他包在一个函数中然后返回一个promise对象。 function hins(){ let name = new Promise(function(resolve,reject){ setTimeout(function(){ console.log('异步执行完成')； resolve('hinschueng') }
Promise语法
m0_52634705的博客
05-18 1234
Promise语法一、回调地狱二、Promise 一、回调地狱 当回调函数嵌套过多的时候出现的问题 没有可维护性和可读性 == 代码没有问题，不是错误的，只是不好进行后期维护 二、Promise 1、Promise的作用 解决回调地狱的方案之一 承诺会帮你做“异步的事情” == 定时器回调函数，ajax函数，事件处理函数 会在成功的时候帮你调用成功的回调函数 会在失败的时候帮你调用失败的回调函数 我们可以把异步的事情交给Promise来做 == pending 继续，也就是正在做异步的事情 == fu
promise入门案例
最新发布
03-14
好的，以下是一个简单的 Promise 入门案例： ```javascript function asyncFunction() { return new Promise(function(resolve, reject) { setTimeout(function() { resolve('Async Function Completed'); }, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值