详解Promise的用法

Promise是一个构造函数,它接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。不过按照标准来讲,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。它本身有all、reject、resolve这几个的方法,原型上有then、catch、race等的方法,下面为大家详细介绍其用法。

 ```
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log('执行完成');
            resolve('随便什么数据');
        }, 1000);
    });
 ```

在上面的代码中,执行了一个异步操作,1秒之后,输出“执行完成”,并且调用resolve方法。看到这里,你可能会注意到,我们并没有调用函数,Promise自动进行了执行,所以我们一般把Promise放到函数里面,示例如下:

 ```
   function run(){
        var p=new Promise(function(resolve,reject){
            setTimeout(function(){
                console.log("执行完成");
                resolve("随便什么数据");
            },1000);
        });
        return p;
    }
```

then方法

在函数最后,会return出Promise对象,然后我们就可以调用它的then方法:

```
run().then(function(data){
        console.log(data);
    });
 ```

在run()的返回上直接调用then方法,then接收一个参数,是函数,并且会拿到我们在runAsync中调用resolve时传的的参数。运行这段代码,会在2秒后输出“执行完成”,紧接着输出“随便什么数据”。这时我们就会明白,then里面的函数就跟我们平时的回调函数一个意思,能够在run这个异步任务执行完成之后被执行。这就是Promise的作用了,简单来讲,就是能把原来的回调写法分离出来,在异步操作执行完后,用链式调用的方式执行回调函数。你可能会想,我写个回调函数不是照样能实现Promise函数的功能吗,但是如果是多次回调,你就会发现callback回调不能满足我们的需求了,而then方法可以进行链式操作,很好地解决了回调地狱的问题。

链式操作的用法

 function run(){
    var p=new Promise(function(resolve,reject){
        setTimeout(function(){
            onsole.log("执行完成");
            resolve("随便什么数据");
        },1000);
     });
     return p;
}
run()
.then(function(data){
    console.log(data);
    return run();
})
.then(function(data){
    console.log(data);
    return run();
})
.then(function(data){
    console.log(data);
});

运行之后,每隔两秒输出每个异步回调中的内容,在runAsync2中传给resolve的数据,能在接下来的then方法中拿到。运行结果如下:
执行完成
随便什么数据
执行完成
随便什么数据
执行完成
随便什么数据

你也可以直接return "hello world",会输出hello world,但其后面不能继续使用then方法。

reject的用法

上面的例子都是“执行成功”的resolve回调,下面我们来看一下reject的用法:

function getNum(){
    var p = new Promise(function(resolve, reject){
    setTimeout(function(){
        var num = Math.ceil(Math.random()*10);
        if(num<6){
            resolve(num);
        }
        else{
            reject('超出范围');
        }
    }, 2000);
    });
    return p;            
}

getNum()
.then(
    function(data){
        console.log('resolved');
        console.log(data);
    }, 
    function(reason){
        console.log('rejected');
        console.log(reason);
    }
);

getNum函数执行时,若得到的数字小于6,则认为成功了,调用resolve方法将Promise的状态置为fullfiled,输出得到的数字;否则调用reject的方法将Promise的状态置为rejected,输出“超出范围”。

catch的用法

catch方法和reject实现的效果是一样的,但它还用另外一个用法:在执行resolve的回调(也就是上面then中的第一个参数)时,如果抛出异常了,那么并不会报错卡死js,而是会进到catch方法中。示例如下:

getNum()
.then(function(data){
    console.log('resolved');
    console.log(data);
    console.log(somedata); //此处的somedata未定义
})
.catch(function(reason){
     console.log('rejected');
     console.log(reason);
 });

在resolve的回调中,我们console.log(somedata);而somedata这个变量是没有被定义的。一般情况下,代码运行到这里就直接在控制台报错了,不往下运行了。但是在Promise中,会得到这样的结果:
resolved
2
rejected
ReferenceError: somedata is not defined

all的用法

Promise的all方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调。示例如下:

function run1(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log('异步任务1执行完成');
            resolve('随便什么数据1');
        }, 1000);
    });
    return p;            
}
function run2(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log('异步任务2执行完成');
            resolve('随便什么数据2');
        }, 2000);
    });
    return p;            
}
Promise
.all([run1(), run2()])
.then(function(results){
    console.log(results);
});

用Promise.all来执行,all接收一个数组参数,里面的值最终都返回Promise对象,等到所有的Promise对象都执行完才会进入then方法,而异步操作的数据都保存在一个数组中,以参数的形式传给then方法,输出结果如下:

        异步任务1执行完成
        异步任务2执行完成
        ["随便什么数据1","随便什么数据2"]

race的用法

race是赛跑的意思,race方法是以执行速度快的异步操作回调。如用race给某个异步请求设置超时时间,并且在超时后执行相应的操作:

function request(){
    var p=new Promise(function(resolve,reject){
        var img=new Image();
            img.onload=function(){
                resolve(img);
            }
            img.src="XXXX";
    });
    return p;
}
        
function timeout(){
    var p=new Promise(function(resolve,reject){
        setTimeout(function(){
            reject("图片请求超时");
        },5000);
    });
    return p;
}
Promise
.race([request(),timeout()])
.then(function(results){
     console.log(results);
})
.catch(function (reason){
    console.log(reason);
});

Promise的race方法会同时调用两个方法,若5秒内request函数调用成功,则调用resolve方法把Promise的状态置为fullfiled,进入then方法;否则会执行timeout函数,则调用reject方法把Promise的状态置为rejected,进入catch方法。示例中,因为找不到图片,输出结果如下:

Failed to load resource: net::ERR_FILE_NOT_FOUND
图片请求超时

Promise构造函数的常用方法到这里基本上就说完了,后面将讲述javascript的闭包现象。敬请期待!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容