视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
详细介绍js中有关promise的知识点
2020-11-27 19:39:37 责编:小OO
文档
下面我就为大家分享一篇浅谈js promise的使用。具有很好的参考价值,看完这篇都懂了。希望对大家有所帮助。

一、背景

大家都知道nodejs很快,为什么会这么快呢,原因就是node采用异步回调的方式来处理需要等待的事件,使得代码会继续往下执行不用在某个地方等待着。但是也有一个不好的地方,当我们有很多回调的时候,比如这个回调执行完需要去执行下个回调,然后接着再执行下个回调,这样就会造成层层嵌套,代码不清晰,很容易进入“回调监狱”,就容易造成下边的例子:

async(1, function(value){
 async(value, function(value){
 async(value, function(value){
 async(value, function(value){
 async(value, function(value){
 async(value, final);
 });
 });
 });
 });
});

这样的写法会让人崩溃,那么有什么办法可以解决这个问题呢,或者有其他别的写法吗?答案是有的,es6新出的promise对象已经es7的async await都可以解决这个问题,当然这里先介绍promise对象,es7的async await将在后边的文章中分享。下边将来介绍Promise对象。

二、简介

Promise,他是一个对象,是用来处理异步操作的,可以让我们写异步调用的时候写起来更加优雅,更加美观便于阅读。顾名思义为承诺、许诺的意思,意思是使用了Promise之后他肯定会给我们答复,无论成功或者失败都会给我们一个答复,所以我们就不用担心他跑了哈哈。所以,Promise有三种状态:pending(进行中),resolved(完成),rejected(失败)。只有异步返回的结构可以改变其状态。所以,promise的过程一般只有两种:pending->resolved或者pending->rejected。

promise对象还有一个比较常用的then方法,用来执行回调函数,then方法接受两个参数,第一个是成功的resolved的回调,另一个是失败rejected的回调,第二个失败的回调参数可选。并且then方法里也可以返回promise对象,这样就可以链式调用了。接下来上代码:

var Pro = function (time) {
 //返回一个Promise对象
 return new Promise(function (resolve, reject) {
 console.log('123');
 //模拟接口调用
 setTimeout(function () {
 //这里告诉Promise 成功了,然后去执行then方法的第一个函数
 resolve('成功返回');
 }, time);
 })
 };
 (function(){
 console.log('start');
 Pro(3000)
 .then(function(data){
 console.log(data);
 return Pro(5000);})
 .then(function(data){
 console.log(data);
 console.log('end');
 })
 })();

上边代码中,定义了一个Pro变量,然后把一个匿名函数赋给他,函数返回一个Promise对象,然后对象里边接收一个函数,分别把resolve跟reject方法当参数传进去,用setTimeOut来模拟异步请求,当执行resolve方法后就会调用then方法的一个函数。结果如下:

三、Promise 的api 

1、Promise.resolve()
2、Promise.reject()
3、Promise.prototype.then()
4、Promise.prototype.catch()
5、Promise.all() // 所有的都有完成,相当于 且
6、Promise.race() // 完成一个即可,相当于 或

1、Promise.resolve()的作用将现有对象转为Promise对象resolvedl;Promise.resolve('test')==new Promise(resolve=>resolve('test'))

2、Promise.reject()也是返回一个Promise对象,状态为rejected;

3、then方法上边已经做介绍,这里就不再介绍。

4、catch():发生错误的回调函数。

5、Promise.all()适合用于所有的结果都完成了才去执行then()成功的操作。举个例子:

let p1 =new Promise(function(resolve,reject){
 resolve(1);
 });
 let p2 = new Promise(function(resolve,reject){
 resolve(2);
 });
 let p3 = new Promise(function(resolve,reject){
 resolve(3);
 });
 Promise.all([p1, p2, p3]).then(function (results) {
 console.log('success:'+results);
 }).catch(function(r){
 console.log("error");
 console.log(r);
 });

最后输出:

6、Promise.race()的作用也是同时执行多个实例,只要有一个实例改变状态,Promise就改为那个实例所改变的状态;

四、例子

var Pro = function () {
 //返回一个Promise对象
 return new Promise(function (resolve, reject) {
 //模拟接口调用
 setTimeout(function () {
 resolve(true);
 }, 1000);
 })
 };
 var Pro2 = function () {
 //返回一个Promise对象
 return new Promise(function (resolve, reject) {
 //模拟接口调用
 setTimeout(function () {
 resolve('Pro2成功执行');
 }, 1000);
 })
 };
 
 Pro().then(function(data){
 var val = data;
 console.log(val)
 if (val) {
 console.log(1111)
 return Pro2()
 }
 
 }).then(function(data1){
 console.log(data1)
 })

输出:

这样就可以用then方法可以实现链式调用了。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

JavaScript调停者模式(详细教程)

在jQuery中有关Dom元素使用方法?

在Vue中如何实现事件响应式进度条组件

下载本文
显示全文
专题