美文网首页JS前端开发联盟群JavaScript
[JavaScript] Promise用法总结

[JavaScript] Promise用法总结

作者: 何幻 | 来源:发表于2016-03-06 10:45 被阅读1307次

    (1)new Promise(function(resolve,reject){})返回了一个Promise对象

    var p=new Promise(function(resolve,reject){});
    alert(p instanceof Promise);    //true
    

    (2)new Promise的参数函数同步执行

    var p=new Promise(function(resolve,reject){
        alert(1);    //先
    });
    
    alert(2);    //后
    
    执行结果:12
    

    (3)Promise.prototype.thenresolve以后也能调用

    var p=new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve(1);
        },1000);
    });
    
    p.then(function(v){
        alert(v);
    });
    
    setTimeout(function(v){
        p.then(function(v){//可以调用
            alert(v);
        });
    },2000);
    
    执行结果:1    1
    

    (4)Promise.prototype.then返回了一个新的Promise对象,
    而不是原来的Promise对象

    var p=new Promise(function(resolve,reject){});
    var q=p.then(function(v){});
    
    alert(q===p); //false
    

    (5)Promise.prototype.then中的this指向window

    var p=new Promise(function(resolve,reject){
        resolve(1);
    });
    
    p.then(function(v){
        alert(this===window); //true
    });
    

    (6)Promise.prototype.then返回的新Promise对象,
    以参数函数的返回值作为新Promise的终结值,
    如果不是Promise对象,则相当于返回Promise.resolve(...)

    var p=new Promise(function(resolve,reject){
        resolve(1);
    });
    
    p.then(function(v){
        alert(v); //1
        return 2;    //相当于返回Promise.resolve(2);
    }).then(function(v){
        alert(v); //2
        return Promise.resolve(3);
    }).then(function(v){
        alert(v); //3
        return Promise.reject(4);
    }).catch(function(v){
        alert(v); //4
    });
    

    (7)Promise.prototype.then(onFulfilled,onRejected)
    Promise.prototype.catch(onRejected)

    var p=new Promise(function(resolve,reject){
        reject(1);
    });
    
    p.then(function(m){
        alert(m);    //不执行
    },function(n){
        alert(n); //1
    });
    
    p.catch(function(v){
        alert(v); //1
    });
    

    (8)throw也会导致Promisereject

    var p=new Promise(function(resolve,reject){
        throw 1;    //保存栈信息,可以throw new Error(1);即e.message/e.stack
    });
    
    p.catch(function(v){
        alert(v); //1
    });
    

    (9)Promise.resolve(value/promise/thenable)
    返回一个以参数为终结值的Promise对象

    value:

    var p1=Promise.resolve(1);
    p1.then(function(v){
        alert(v); //1
    });
    

    Promise:

    var p2=Promise.resolve(new Promise(function(resolve,reject){
        resolve(1);
    }));
    p2.then(function(v){
        alert(v); //1
    });
    

    thenable:

    var p3=Promise.resolve({
        then:function(resolve,reject){
            resolve(1);
        }
    });
    p3.then(function(v){
        alert(v); //1
    });
    

    (10)Promise.reject(reason)

    var p=Promise.reject(1);
    
    p.then(function(m){
        alert(m);    //不执行
    },function(n){
        alert(n); //1
    });
    
    p.catch(function(v){
        alert(v); //1
    });
    

    (11)Promise.all(iterable)返回一个新的Promise
    它等所有的iterable中的PromiseResolve后就Resolve
    只要有一个RejectReject

    如果iterable中某一个不是Promise,则使用Promise.resolve(...)转换为Promise

    var p=Promise.resolve(1);
    Promise.all([true,p]).then(function(v){
        alert(JSON.stringify(v)); //[true, 1]
    });
    
    var p1=Promise.resolve(1);
    varp2=Promise.reject(2);
    Promise.all([true,p1,p2]).then(function(m){
        alert('resolve: '+JSON.stringify(m));    //不执行
    },function(n){
        alert('reject: '+JSON.stringify(n));    //reject: 2
    });
    

    (12)Promise.race(iterable)返回一个新的Promise
    只要iterable中有一个PromiseResolve/Reject了就Resolve/Reject

    var p1=new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve(1);
        },1000);
    });
    var p2=new Promise(function(resolve,reject){
        setTimeout(function(){
            reject(1);
        },2000);
    });
    
    Promise.race([p1,p2]).then(function(m){
        alert('resolve: '+m);    //resolve: 1
    },function(n){
        alert('reject: '+n);    //不执行
    });
    

    相关文章

      网友评论

        本文标题:[JavaScript] Promise用法总结

        本文链接:https://www.haomeiwen.com/subject/obdnkttx.html