zoukankan      html  css  js  c++  java
  • Promise简介

    Promise是ES6中的函数,规范了如何处理异步任务的回调函数,功能类似于jQuery的defferred。简单说就是通过promise对象的不同状态调用不同的回调函数。目前IE8及以下不支持,其他浏览器都支持。

    promise对象的状态,从Pending转换为Resolved或Rejected之后,这个promise对象的状态就不能再发生任何变化。

    使用步骤:

    var promise = new Promise(function(resolve, reject) {
         //定义异步执行的任务(如setTimeout、ajax请求等),该任务会立即执行。
       //在任务中调用resolve(value) 或 reject(error)方法,以改变promise对象的状态。改变状态的方法只能在异步任务中调用。
    //promise状态改变后,会调用对应的回调方法 setTimeout(function(){ //do something else... resolve('callback registerd in then') },1000) }); promise.then(function(value){ //resolve时的回调函数,参数由异步的函数传进来 alert(value+' is invoked'); }) .catch(function(error){ //发生异常时或明确reject()时的回调函数 })

     具体使用:

    function getURL(URL) {                      //因为promise创建时即执行,所以用工厂函数封装promise对象
        return new Promise(function (resolve, reject) {
            var req = new XMLHttpRequest();
            req.open('GET', URL, true);
            req.onload = function () {
                if (req.status === 200) {
                    resolve(req.responseText);
                } else {
                    reject(new Error(req.statusText));
                }
            };
            req.onerror = function () {
                reject(new Error(req.statusText));
            };
            req.send();
        });
    }
    // 运行示例
    var URL = "http://httpbin.org/get";
    getURL(URL).then(function onFulfilled(value){
        console.log(value);
    }).catch(function onRejected(error){
        console.error(error);
    });
    View Code

    Promise的回调只有异步方式,即使是同步任务的回调也是异步执行 。

    var promise = new Promise(function (resolve){
        console.log("inner promise");                  // 执行1:Promise封装的任务先执行
        resolve(‘callBack’);
    });
    promise.then(function(value){
        console.log(value);                           // 执行3:虽然注册时状态为resolved,但回调仍是异步的;
    });
    console.log("outer promise");                    // 执行2:同步代码先执行

    promise的方法链

    then方法注册的回调会依次被调用,每个then方法之间通过return 返回值传递参数。但是回调中的异常会导致跳过之间then的回调,直接调用catch的回调,之后再继续调用剩下的then的回调。在then(onFulfilled, onRejected)中,onFulfilled的异常不会被自己的onRejected捕获,所以优先使用catch,而不要使用onRejected注册回调。

     promise .then(taskA) .then(taskB) .catch(onRejected) .then(finalTask);

     taskA抛异常,taskB被跳过,finalTask仍会被调用,因为catch返回的promise对象的状态为resolved。

    then方法内可以返回3种值

    1. 返回另一个promise对象,下一个then方法根据其状态选择onFullfilled/onRejected回调函数执行,参数仍由新promise的resolv/reject方法传递;

    var promise = new Promise(function(resolve, reject) {
        setTimeout(function(){
            resolve('触发第一个then中的回调')
        },1000)
    })
    .then(function(value){
        console.log(value);
        //返回一个新Promise对象,该对象的状态决定其后的then中的回调啥时候执行
        //如果返回undefined或其他非Promise对象,则会同步执行第二个then
        return new Promise(function(resolve,reject){
            setTimeout(function(){resolve('触发第二个then中的回调')},2000)
        })
    })
    .then(function(v){
        console.log(v);
    })

    2. 返回一个同步值,下一个then方法沿用当前promise对象的状态,无需等异步任务结束会立即执行;实参为上一then的返回值;如果没有return,则默认返回undefined;

    3. 抛出异常(同步/异步):throw new Error(‘xxx’);

    then不仅是注册一个回调函数,还会将回调函数的返回值进行变换,创建并返回一个新promise对象。实际上Promise在方法链中的操作的都不是同一个promise对象。

    var aPromise = new Promise(function (resolve) {
        resolve(100);
    });
    var thenPromise = aPromise.then(function (value) {
        console.log(value);
    });
    var catchPromise = thenPromise.catch(function (error) {
        console.error(error);
    });
    console.log(aPromise !== thenPromise); // => true
    console.log(thenPromise !== catchPromise);// => true
    View Code

    Promise构造方法中显式return的promis对象的状态,不会被传递给then方法。

    //少用此种方式
     new Promise(function () {
        return Promise.resolve();    //即使内部返回的promise对象的状态为resolved,依然不能传给后面的then方法。
    }).then(function (value) {
        console.log("Can't be invoked");    //不会被调用,前者的pomise一直处于pending状态
     })
    //正常模式 Promise.resolve().then(
    function () { return Promise.resolve(); //then方法中可以传递promise对象的状态给后面的then使用 }).then(function (value) { console.log("invoked"); //会被调用 })

    Promise.all()静态方法,同时进行多个异步任务。在接收到的所有promise对象都变为FulFilled 或者Rejected 状态之后才会继续进行后面的处理。

    Promise.all([promiseA, promiseB]).then(function(results){//results是个数组,元素值和前面promises对象对应});

    // 由promise对象组成的数组会同时执行,而不是一个一个顺序执行,开始时间基本相同。
    function timerPromisefy(delay) {
        console.log('开始时间:”'+Date.now()) 
        return new Promise(function (resolve) {
            setTimeout(function () {
                resolve(delay);
            }, delay);
        });
    }
    var startDate = Date.now();
    Promise.all([
        timerPromisefy(100),       //promise用工厂形式包装一下
        timerPromisefy(200),
        timerPromisefy(300),
        timerPromisefy(400)
    ]).then(function (values) {
        console.log(values);    // [100,200,300,400]
    });
    View Code

    不同时执行,而是一个接着一个执行promise

    //promise factories返回promise对象,只有当前异步任务结束时才执行下一个then
    function sequentialize(promiseFactories) {
        var chain = Promise.resolve();
        promiseFactories.forEach(function (promiseFactory) {
            chain = chain.then(promiseFactory);
        });
        return chain;
    }

    Promise.race()同all()类似,但是race()只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话,就会执行对应的回调函数。不过在第一个promise对象变为Fulfilled之后,并不影响其他promise对象的继续执行。

    //沿用Promise.all()的例子
    Promise.race([
        timerPromisefy(1),
        timerPromisefy(32),
        timerPromisefy(64),
        timerPromisefy(128)
    ]).then(function (value) {
       console.log(values);    // [1]
    });
    View Code

    Promise.race()作为定时器的妙用

    Promise.race([
        new Promise(function (resolve, reject) {
            setTimeout(reject, 5000);         // timeout after 5 secs
        }),
        doSomethingThatMayTakeAwhile()
    ]);   

    在then中改变promise状态

    因为then的回调中只有value参数,没有改变状态的方法(只能在构造方法的异步任务中使用),要想改变传给下一个then的promise对象的状态,只能重新new一个新的Promise对象,在异步任务中判断是否改变状态,最后return出去传给下一个then/catch。

    var promise = Promise.resolve('xxx');//创建promise对象的简介方法
    promise.then(function (value) {
        var pms=new Promise(function(resolve,reject){
            setTimeout(function () {
                // 在此可以判断是否改变状态reject/resolve
                reject(‘args’);
            }, 1000);
        })
        return pms;    //该promise对象可以具有新状态,下一个then/catch需要等异步结束才会执行回调;如果返回普通值/undefined,之后的then/catch会立即执行
    }).catch(function (error) {
        // 被reject时调用
        console.log(error)
    });                

    获取两个promises的结果

    //方法1:通过在外层的变量传递
    var user;
    getUserByName('nolan').then(function (result) {
        user = result;
        return getUserAccountById(user.id);
    }).then(function (userAccount) {
        //可以访问user和userAccount
    });
    
    //方法2:后一个then方法提到前一个回调中
    getUserByName('nolan').then(function (user) {
        return getUserAccountById(user.id).then(function (userAccount) {
            //可以访问user和userAccount
        });
    });
    View Code

    注意使用promise时的整体结构

    假定doSomething()和doSomethingElse()都返回了promise对象

    常用方式:

    doSomething().then(doSomethingElse).then(finalHandler);
    doSomething
    |-----------------|
                      doSomethingElse(resultOfDoSomething)    //返回新promise,下一个then要收到新状态才执行
                      |------------------|
                                         finalHandler(resultOfDoSomethingElse)
                                         |---------------------|

    常用变通方式:

    doSomething().then(function () { return doSomethingElse();}).then(finalHandler);
    doSomething
    |-----------------|
                      doSomethingElse(undefined) //then外层函数的arguments[0]== resultOfDoSomething
                      |------------------|
                                         finalHandler(resultOfDoSomethingElse)
                                         |------------------| 

    错误方式1:

    doSomething().then(function () { doSomethingElse();}).then(finalHandler);
    doSomething
    |-----------------|
                      doSomethingElse(undefined)    //虽然doSomethingElse会返回promise对象,但最外层的回调函数是return undefined,所以下一个then方法无需等待新promise的状态,会马上执行回调。
                      |------------------|
                      finalHandler(undefined)
                      |------------------|

    错误方式2:

    doSomething().then(doSomethingElse()).then(finalHandler);
    doSomething
    |-----------------|
    doSomethingElse(undefined)         //回调函数在注册时就直接被调用
    |----------|
                      finalHandler(resultOfDoSomething)
                      |------------------|

    参考文章:https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html

    jQuery中的deferred对象同Promise对象实现相同的功能:

    // 创建deferred对象
    var dtd = $.Deferred();
     //异步任务中改变deferred对象的状态
        dtd.resolve('resolved');
    // 注册回调函数,deferred状态改变后执行回调。
    dtd.done(doneCallback [, doneCallback2])
    以上皆为个人理解,如有错误之处,欢迎留言指正。
  • 相关阅读:
    [LintCode] Single Number 单独的数字
    [LeetCode] 444. Sequence Reconstruction 序列重建
    [LeetCode] K-th Smallest in Lexicographical Order 字典顺序的第K小数字
    [LeetCode] Arranging Coins 排列硬币
    [LeetCode] Ternary Expression Parser 三元表达式解析器
    [LeetCode] 436. Find Right Interval 找右区间
    在Mac上配置全局的Git忽略文件
    Git『Everything up-to-date』问题解决
    Android组件化框架项目详解
    Android架构设计之插件化、组件化
  • 原文地址:https://www.cnblogs.com/kevin2chen/p/6443729.html
Copyright © 2011-2022 走看看