美文网首页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用法总结

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

  • 理解Promise in JavaScript

    Promise是JavaScript中的一个核心概念,初学JavaScript,对Promise的概念和用法都比较...

  • Promise 对象

    一、Promise的含义 Promise在JavaScript语言中早有实现,ES6将其写进了语言标准,统一了用法...

  • JavaScript Promise的用法

    Promise是JavaScript ES6中的一个新特性,用于异步处理。在没有Promise之前,做异步调用通常...

  • Javascript Promise用法(1)

    现在不会用Promise都不好意思说自己是前端,Promise为什么火起来,一句话解决了回调嵌套和执行顺序问题最重...

  • Promise用法总结

    参照来源 1.调用resolve或reject并不会终结 Promise 的参数函数的执行; 2.在race,al...

  • Promise用法总结

    Promise前置储备知识: 函数对象和实例对象(简称对象)同步回调和异步回调(异步回调会将要执行代码块放入队列)...

  • Promise总结

    前言 看完阮一峰大神的Promise详解之后,自己总结一下promise的用法,毕竟看的东西是别人的,自己写的总结...

  • promise详解

    Promise 用法api 1.基本用法 2.简便写法 Promise.all([]) Promise.race...

  • javaScript基础知识

    冴羽写博客 JavaScript深入系列ES6中promise如何实现 自我总结的JS javascript知识体...

网友评论

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

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