关键词:
最近在看《你不知道的javascript中卷》,发觉作者花了基本一半的篇幅去讲异步和promise,觉得有必要总结一下。
其实本文的目的是想手写一个Promise的,无奈总结着总结着发觉篇幅有点长,因此只好一分为二,先介绍promise的用法,知道怎么用,我们才知道怎么写,所以把手写一个promise的任务放到了下一篇文章当中。
当然,网上有很多关于promise的文章,都可以参考参考,有误之处,欢迎之处。
什么是Prmoise
promise是ES6新增的一个特征,它已被列入ES6的正式规范中
Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码;让代码更加的直观。也就是说,有了Promise对象,就可以将异步操作以同步的操作的流程表达出来,避免了层层嵌套的回调函数。
示例:未使用promise,回调必须层层嵌套
$.ajax(url1, function(data1){ // do something... $.ajax(url2, function(data2){ // do something... $.ajax(url3, function(data3){ // do something... done(data3); // 返回数据 }) }); });
如果有多个嵌套,导致代码不够直观,而且如果几个操作之前没有前后顺序之分,需要等待上一个操作完成才可以进行下一个操作,造成不必要的等待
promise就是为了解决这些问题而产生的。
Promise
对象的特点:
1、对象的状态不受外界影响。
Promise
对象代表一个异步操作,有三种状态
pending
(执行中)Resolved
(成功,又称Fulfilled)rejected
(拒绝)
其中pending为初始状态,fulfilled和rejected为结束状态(结束状态表示promise的生命周期已结束)。
promise只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态.。
2、一旦状态改变,就不会再变,任何时候都可以得到这个结果。
Promise
对象的状态改变,只有两种可能:从Pending
变为Resolved
和从Pending
变为Rejected
pending->fulfilled,pending->rejected。
只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果
Promise
对象的缺点:
1、无法取消Promise
,一旦新建它就会立即执行,无法中途取消。
2、如果不设置回调函数,Promise
内部抛出的错误,不会反应到外部。
3、当处于Pending
状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
promise兼容性
除了IE这种古老的浏览器和一些低版本的安卓外,现代浏览器支持还是挺好的,所以我们可以在谷歌的控制台直接测试我们的代码
Promise的使用
先提前说明一下,下面的代码示例,都可以复制到谷歌的控制台就行测试!!
1、基本用法:
(1)、首先我们new一个Promise,将Promise实例化
(2)、然后在实例化的promise可以传两个参数,一个是成功之后的resolve,一个是失败之后的reject
(3)、Promise实例生成以后,可以用then
方法分别指定Resolved
状态和Reject
状态的回调函数
代码如下:
var promise = function(isReady){ return new Promise(function(resolve, reject){ // do somthing, maybe async if (isReady){ return resolve('hello world'); } else { return reject('failure'); } }); } //Promise实例生成以后,可以用then方法分别指定Resolved状态和Reject状态的回调函数。 promise(true).then(function(value){ // success,这里是resolve的回调函数 console.log(value); //hello world }, function(err){ // failure,这里是reject的回调函数 console.log(err) })
上述代码是执行成功,返回hello world,如果想测试一下失败后的返回值,可以在promise(true).then...这里改为 promise(false).then...即可
2、链式操作
也许你会说,Promise只是简化层层回调的写法而已吧,其实不然,它的精髓是通过维护状态、传递状态的方式来使回调方式能够及时的调用,因此,相比于callback,它更灵活,更简单。下面我们来看看Promise的链式操作:
makePromise1() .then(function(value){ console.log(value); return makePromise2(); }) .then(function(value){ console.log(value); return makePromise3(); }) .then(function(value){ console.log(value); }); function makePromise1(){ var p = new Promise(function(resolve, reject){ //异步操作 setTimeout(function(){ console.log('异步任务1'); resolve('异步任务1传过来的值'); }, 2000); }); return p; } function makePromise2(){ var p = new Promise(function(resolve, reject){ //异步操作 setTimeout(function(){ console.log('异步任务2'); resolve('异步任务2传过来的值'); }, 2000); }); return p; } function makePromise3(){ var p = new Promise(function(resolve, reject){ //异步操作 setTimeout(function(){ console.log('异步任务3'); resolve('异步任务3传过来的值'); }, 2000); }); return p; }
上面的代码中,我们有三个异步操作,makePromise1,makePromise2,makePromise3。其中第二个和第三个依次执行,也就是上一个操作完成之后才可以进行。
输出的值为:
异步任务1
异步任务1传过来的值
异步任务2
异步任务2传过来的值
异步任务3
异步任务3传过来的值
3、Promise的catch方法
var promise = function(isReady){ return new Promise(function(resolve, reject){ // do somthing, maybe async if (isReady){ return resolve('hello world'); } else { return reject('failure'); } }); } promise(true) .then(function(value){ console.log('resolved'); console.log(value); console.log(haha); //此处的haha未定义 }) .catch(function(error){ console.log('rejected'); console.log(error); });
catch 方法是 then(onFulfilled, onRejected) 方法当中 onRejected 函数的一个简单的写法,也就是说可以写成 then(fn).catch(fn),相当于 then(fn).then(null, fn)
使用 catch 的写法比一般的写法更加清晰明确,其实可以类比成try/catch,这样,其中有报错的地方不会阻塞运行。比如定义了一个未定义haha,正常来说它上面的代码也不会运行,因为被这个报错阻塞了,有了catch,它上面的代码可以正常运行下去:
控制台打印出来的东西:
resolved
hello world
rejected
ReferenceError: haha is not defined(…)
4、promise.all方法
Promise.all
可以接收一个元素为 Promise 对象的数组作为参数,当这个数组里面所有的 Promise 对象都变为 resolve 时,该方法才会返回。
代码示例:
var p1 = new Promise(function (resolve) { setTimeout(function () { resolve("第一个promise"); }, 3000); }); var p2 = new Promise(function (resolve) { setTimeout(function () { resolve("第二个promise"); }, 1000); }); Promise.all([p1, p2]).then(function (result) { console.log(result); // ["第一个promise", "第二个promise"] });
上面的代码中,all接收一个数组作为参数,p1,p2是并行执行的,等两个都执行完了,才会进入到then,all会把所有的结果放到一个数组中返回,所以我们打印出我们的结果为一个数组。
值得注意的是,虽然p2的执行顺序比p1快,但是all会按照参数里面的数组顺序来返回结果。all的使用场景类似于,玩游戏的时候,需要提前将游戏需要的资源提前准备好,才进行页面的初始化。
5、promise.race方法
race的中文意思为赛跑,也就是说,看谁跑的快,跑的快的就赢了。因此,promise.race也是传入一个数组,但是与promise.all不同的是,race只返回跑的快的值,也就是说result返回比较快执行的那个。
var p1 = new Promise(function (resolve) { setTimeout(function () { console.log(1); resolve("第一个promise"); }, 3000); }); var p2 = new Promise(function (resolve) { setTimeout(function () { console.log(2); resolve("第二个promise"); }, 1000); }); Promise.race([p1, p2]).then(function (result) { console.log(result); }); // 结果: // 2 // 第二个promise // 1
可以看到,传的值中,只有p2的返回了,但是p1没有停止,依然有执行。
race的应用场景为,比如我们可以设置为网路请求超时。写两个promise,如果在一定的时间内如果成功的那个我们没有执行到,我们就执行失败的那个,这里不再举例子,可以看看阮一峰的ES入门。
ES6的介绍就到这里了,下一篇文章我们来手写一个promise
谈谈我对promise的理解
一、Promise是什么?Promise是最早由社区提出和实现的一种解决异步编程的方案,比其他传统的解决方案(回调函数和事件)更合理和更强大。ES6将其写进了语言标准,统一了用法,原生提供了Promise对象。ES6规定,Promise对象是一... 查看详情
谈谈es6的promise对象
前言开篇首先设想一个日常开发常常会遇到的需求:在多个接口异步请求数据,然后利用这些数据来进行一系列的操作。一般会这样去写:$.ajax({url:‘......‘,success:function(data){$.ajax({//要在第一个请求成功后才可以执行下一步url:... 查看详情
谈谈补码与移位
在计算机中整数的表示使用补码来表示的。什么是补码呢?首先要明白什么是原码。数字是有符号的,计算机中,用最高位作为符号位。以四位机器码举例:1的原码表示是:0001;-1的原码表示是:1001。也就是说表示实际数值的... 查看详情
谈谈数据库连接池的原理
转自:https://blog.csdn.net/shuaihj/article/details/14223015谈谈数据库连接池的原理 帅宏军 这次我... 查看详情
在 Promise.All 中释放 MySQL 连接
】在Promise.All中释放MySQL连接【英文标题】:ReleaseMySQLconnectionsinaPromise.All【发布时间】:2020-02-2400:39:53【问题描述】:我想释放MySQL池提供的连接。在“for”循环中,连接被正确释放,但如果我使用Promise.All异步执行它,我有一些... 查看详情
有了async为什么还要promise(代码片段)
今天突然想到了一个面试问题,有了async为什么还要promise处理异步请求,当时想的答案是,promise是将任务异步处理,而async和await是将异步任务趋于同步任务,但是并不知道其原理,考虑了一下,大概... 查看详情
年末了,和读者谈谈心
按照原计划,这学期我将在1.14日下午五点半结束最后一门考试,然后再开始起草这学期的总结。但是由于疫情西安肆虐,所有的考试都被迫推迟,人也被迫封印在宿舍中。于是趁此跨年之际,分享一些近日新... 查看详情
结合《剑指offer(第二版)》面试题51来谈谈归并排序
一.题目大意 给定一个数组A,对于数组A中的两个数字,如果排在前面的一个数字大于(必须大于,等于不算)后面的数字,则这两个数字组成一个逆序对。要求输出数组A中的逆序对的总数。例如,对于数组{7,5,6,4},一共存... 查看详情
谈谈为什么我们需要云原生架构?
未来的软件,从诞生起,就是生在云上,长在云上的。这个说法绝对不是没有根据的,看看现在的互联网大厂在做的事情,你就知道了: 阿里宣布成立云原生技术委员会,并投入数十亿大力推动阿里... 查看详情
有了async为什么还要promise(代码片段)
今天突然想到了一个面试问题,有了async为什么还要promise处理异步请求,当时想的答案是,promise是将任务异步处理,而async和await是将异步任务趋于同步任务,但是并不知道其原理,考虑了一下,大概... 查看详情
promise
http://es6.ruanyifeng.com/#docs/promise Promise对象Promise的含义基本用法Promise.prototype.then()Promise.prototype.catch()Promise.all()Promise.race()Promise.resolve()Promise.reject()两个有用的附加方法应用Promise的含义Pr 查看详情
jasmine.Promise 与 webdriver.promise.Promise
】jasmine.Promise与webdriver.promise.Promise【英文标题】:jasmine.Promisevswebdriver.promise.Promise【发布时间】:2017-06-2617:01:37【问题描述】:在Protractor页面对象测试中使用此方法:publicnavigateTo=():Promise<any>=>returnbrowser.get(\'https://ma 查看详情
promise简介
Promise对象Promise的含义基本用法Promise.prototype.then()Promise.prototype.catch()Promise.all()Promise.race()Promise.resolve()Promise.reject()两个有用的附加方法应用async函数Promise的含义Promise是异步编程的一种解决方案,比传统的解决方案——回调函数... 查看详情
promise原理
剖析Promise之基础篇从JavaScript的事件循环到理解Promise的工作原理Promise原理Promise的实现原理Promise原理解析深入Promise(一)——Promise实现详解JSPromise的实现原理深入了解promise的原理 查看详情
promise知识盲区整理(代码片段)
promise知识盲区整理promise好处promise简单的实现promise封装fs文件操作----node.js环境下运行promise封装ajax请求node.js中的promisify方法promise的状态promise的结果promise的工作流程Promise的APIpromise的构造函数promise的then方法promise的catch方法promis... 查看详情
promise用法(代码片段)
阅读目录promise是什么?为什么会有promise?promise是一个对象promise详解promise有三个状态:Promise解决回调地狱Promise用法Promise概述Promise基本用法Promise基于原生ajax发送请求,php并设置跨域基于Promise处理Ajax请求Promise... 查看详情
promise原理详解(代码片段)
参考文章:深入理解Promise、【翻译】Promises/A+规范从入门Promise的正确姿势中我们已经了解到Promise的基本用法。那么现在给你一个需求:根据Promise的用法和Promise/A+规范,实现一个自己的Promise函数。1、Promise构造函数的结构根据Pr... 查看详情
JavaScript Promises:将 Promise 与非 Promise 对象链接起来。为啥它有效?
】JavaScriptPromises:将Promise与非Promise对象链接起来。为啥它有效?【英文标题】:JavaScriptPromises:chainingpromiseswithnon-promiseobjects.Whyitworks?JavaScriptPromises:将Promise与非Promise对象链接起来。为什么它有效?【发布时间】:2017-10-1607:28:1... 查看详情