Promise笔记

首先，让我们认识以下什么是Promise: 所谓Promise，就是一个对象，用来传递异步操作的消息，它代表了某个未来才会知道结果的事件。

听起来有些不知所谓，那么首先，console一下吧~

console.dir(Promise)

可以看出它是一个构造函数，拥有accept、all等属性，prototype中有catch、chain、then等方法，这意味着其实例也将拥有这些方法~

接下来创建一个试试

var p = new Promise(function(resolve, reject){
    //异步操作
    setTimeout(function(){
        console.log(‘完成‘);
        resolve(‘回调结果‘);
    }, 2000);
});

解析:

Promise构造函数接受一个函数作为参数，该函数有两个参数resolve和reject

Promise对象有3种状态: Pending(进行中)、Resolved(已完成,又叫Fulfilled)、Rejected(已失败)，

如果异步操作成功，则用 resolve 方法将 Promise 对象的状态，从 pending 变为 resolved；

如果异步操作失败，则用 reject 方法将 Promise 对象的状态，即从 pending 变为 rejected。

运行结果:两秒后输出 “完成”

由此发现一个问题:我们只是创建了一个实例，并未调用它！因此Promise实例创建时就运行了！因此一般做法是将其包在一个函数当中，需要时进行调用

function runasync(){
        var p = new Promise(function(resolve, reject){
            //异步操作
            setTimeout(function(){
                console.log(‘完成‘);
                resolve(‘回调结果‘);
            }, 2000);
        });  
        return p;
    }；

//调用

runasync();

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

接下来是相关方法的使用:

then()

then接受一个函数或两个函数作为参数，第一个函数有data参数，data就是resolve传入的参数，第二个有err参数，err是reject传入的参数

eg: runasync().then(function(data){console.log(data)}); //输出完成  回调结果

于是乎我们将异步操作的结果传递过来，回调函数可在函数外部链式执行！

当然，如果只有一步异步操作，体现不出Promise的精华，但若有多个异步操作，Promise将省去大量代码！

eg:

function runasync(){
        var p = new Promise(function(resolve, reject){
            //异步操作
            setTimeout(function(){
                console.log(‘完成‘);
                resolve(‘回调结果‘);
            }, 2000);
        });
        return p;
    };
    function runasync1(){
        var p = new Promise(function(resolve, reject){
            //异步操作
            setTimeout(function(){
                console.log(‘完成‘);
                resolve(‘回调结果1‘);
            }, 2000);
        });
        return p;
    };
    function runasync2(){
        var p = new Promise(function(resolve, reject){
            //异步操作
            setTimeout(function(){
                console.log(‘完成‘);
                resolve(‘回调结果2‘);
            }, 2000);
        });
        return p;
    };

    runasync().then(function(data){
        console.log(data);
        return runasync1();
    })
    .then(function(data){
        console.log(data);
        return runasync2();
    });

输出:

完成
回调结果
完成
回调结果1
完成

catch()

catch与then的第二个参数一样，专门用来指定reject情况下的操作，但它有一种特殊用法:

如果resolve的回调(也就是then)出现异常，在其后面接上catch，就不会卡死js，而是会进入catch方法中。

eg:

function runasync(){
        var p = new Promise(function(resolve, reject){
            //异步操作
            setTimeout(function(){
                console.log(‘失败‘);
                resolve("11");
            }, 2000);
        });
        return p;
    };

    runasync().then(function(data){　　　　　//d未定义，一般情况下会报错，但接上catch不会
        console.log(d);
    }).catch(function(err){
        console.log(err);
    })

输出:

失败
ReferenceError: d is not defined(…)

all()

如果有多个异步操作同时执行，而我们想在它们都执行完成后再进行操作应该怎么办？Promise提供了all()方法

Promise.all(array)

array是Promise实例对象数组

eg:

function runasync(){
        var p = new Promise(function(resolve, reject){
            //异步操作
            setTimeout(function(){
                console.log(‘完成‘);
                resolve(‘回调结果‘);
            }, 2000);
        });
        return p;
    };
    function runasync1(){
        var p = new Promise(function(resolve, reject){
            //异步操作
            setTimeout(function(){
                console.log(‘完成‘);
                resolve(‘回调结果1‘);
            }, 2000);
        });
        return p;
    };
    function runasync2(){
        var p = new Promise(function(resolve, reject){
            //异步操作
            setTimeout(function(){
                console.log(‘完成‘);
                resolve(‘回调结果2‘);
            }, 2000);
        });
        return p;
    };

    Promise.all([runasync(), runasync1(), runasync2()]).then(function(datas){
        console.log(datas);
    }, function(errs){
        console.log(errs);
    })

输出:

完成
完成
完成
["回调结果", "回调结果1", "回调结果2"] //可见将结果以数组的形式返回

如果其中一个是reject呢?

    function runasync(){
        var p = new Promise(function(resolve, reject){
            //异步操作
            setTimeout(function(){
                console.log(‘完成‘);
                resolve(‘回调结果‘);
            }, 2000);
        });
        return p;
    };
    function runasync1(){
        var p = new Promise(function(resolve, reject){
            //异步操作
            setTimeout(function(){
                console.log(‘完成‘);
                resolve(‘回调结果1‘);
            }, 2000);
        });
        return p;
    };
    function runasync2(){
        var p = new Promise(function(resolve, reject){
            //异步操作
            setTimeout(function(){
                console.log(‘完成‘);
                reject(‘回调结果2‘);
            }, 2000);
        });
        return p;
    };

    Promise.all([runasync(), runasync1(), runasync2()]).then(function(data){
        console.log(data);
    }, function(err){
        console.log(err);
    })

输出:

完成
完成
完成
回调结果2

可见只要有一个异步结果是失败状态，整个函数的执行结果将被认为是失败的

race()

all方法是典型的 "谁跑得慢就以谁为准"，而race(赛跑)便是"谁跑得快就以谁为准"

其返回的结果，是最快完成的异步操作返回的结果

    function runasync(){
        var p = new Promise(function(resolve, reject){
            //异步操作
            setTimeout(function(){
                console.log(‘完成‘);
                reject(‘回调结果‘);
            }, 5000);
        });
        return p;
    };
    function runasync1(){
        var p = new Promise(function(resolve, reject){
            //异步操作
            setTimeout(function(){
                console.log(‘完成‘);
                resolve(‘回调结果1‘);
            }, 2000);
        });
        return p;
    };
    function runasync2(){
        var p = new Promise(function(resolve, reject){
            //异步操作
            setTimeout(function(){
                console.log(‘完成‘);
                resolve(‘回调结果2‘);
            }, 3000);
        });
        return p;
    };

    Promise.race([runasync(), runasync1(), runasync2()]).then(function(data){
        console.log(data);
    }, function(err){
        console.log(err);
    })

输出:

完成
回调结果1
完成
完成

//其返回的结果与成功/失败无关，只求最快

时间： 2024-12-20 01:04:32

Promise笔记的相关文章

promise 笔记

拒绝: var promise=new Promise(function(resolve,reject){ throw new Error(0); }); promise.then(function(arg){ console.log(arg); }).catch(function(arg){ console.log('c' + arg);//走这 }); var promise=new Promise(function(resolve,reject){ reject(0); }); promi

angular学习笔记(二十八-附2)-$resource中的promise对象

下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource){ return $resource('/card/user/:userID/:id',{userID:123,id:'@id'},{charge:{method:'POST',params:{charge:true},isArray:false}}) }); HttpREST.factory('h

ES6学习笔记五：Promise异步任务

一:Promise对象 Promise对象代表一个异步操作,有三种状态:Pending(进行中).Resolved(已完成,又称 Fulfilled)和Rejected(已失败). 二:创建与使用 var promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value); } else { reject(error); } }); Promise构造函数接受一个

Promise回调地狱学习小小小小小笔记

Promise属于ES6新加入的语法 目前在浏览器中输入Promise就可以看到有这个对象了 用法是创建一个新的函数来包括原来的函数体并且在原来的函数体中再包一个可以返回一个新的实例化Promise对象而这个promise自带resolve用于回调 like this: function promiseAnimate(ball,dis){ return new Promise(function(resolve,reject){ function _animation() { setTimeout

ArcGIS API for JavaScript 4.2学习笔记[7] 鹰眼（缩略图的实现及异步处理、Promise、回调函数、监听的笔记）

文前说明:关于style就是页面的css暂时不做评论,因为官方给的例子的样式实在太简单了,照抄阅读即可. 这篇文章有着大量AJS 4.x版本添加的内容,如监听watch.Promise对象.回调函数.异步处理等内容,原理性的东西我会在文末解释,各位看官不用担心看不懂,我尽量用通俗的语言解释这些. 惯例,如果不习惯从头看到尾,可以直接跳到后面看总结. 大家应该看过商业地图的缩略图功能吧?以度娘地图为例,在使用街景地图的时候,左下角会出现一个地点一样的2D小地图: 这个就是鹰眼功能的应用,在很多桌面

读书笔记-你不知道的JS中-promise(2)

继续填坑 模式 考虑下面的代码: function fn(x) { //do something return new Promise(function(resolve, reject) { //调用resolve(..)和reject(...) }); } var p = fn(2); new Promise(..)模式通常称为revealing constructor.传入函数会立即执行(不会像then(..)中的回调一样异步延迟),它有两个参数,分别为resolve和reject.这些是p

ES6学习笔记之Promise

入职百度EFE团队实习已经三周了,实习中接触到了生产环境的技术和开发流程,大开眼界,和自己在学校接小作坊式项目是很不一样的体验.其中一个很大的感触是,ES6早已不是“选修”的尝鲜技术,而是已经全面普及应用.非学不可的“必修”技术,看来该版本新加入的特性的确解决了前端项目开发中的痛点,有利于提升开发效率. 说到ES6,像let,const,箭头函数这些特性简单易懂,很快就实现了无痛上手:然而Promise不是那么直观,项目文档里大量的“返回一个Promise对象”让初接触这一概念的我一度懵比,于是

ES6中Promise学习笔记

参考资料: 廖雪峰 javascript教程-promise 阮一峰 ECMAScript 6 入门-Promise 对象 JavaScript Promise迷你书(中文版)

[Effective JavaScript 笔记]第68条：使用promise模式清洁异步逻辑

构建异步API的一种流行的替代方式是使用promise(有时也被称为deferred或future)模式.已经在本章讨论过的异步API使用回调函数作为参数. downloadAsync('file.txt',function(file){ console.log('file:'+file); }); 基于promise的API不接收回调函数作为参数.相反,它返回一个promise对象,该对象通过其自身的then方法接收回调函数. var p=downloadP('file.txt'); p.th