学习Promise

jokester 发布于2019-08-20 18:32 / 2185人阅读

摘要：另外，需要注意多级的回调函数是交替执行的，这正是由回调的异步性决定的。控制台输出可以接收一个值或者是一个对象作为参数。但通过的方式创建的对象都是一个新的对象，因此后面的三个比较结果都是。

promise的立即执行性

let p = new Promise(function(resolve, reject) {
    console.log("create a promise") //这时立即执行的
    resolve("success")
}

console.log("after new promise")

p.then(function(value) {
    console.log(value)
})

执行结果：

"create a promise"
"after new promise"
"success"

promise三种状态

未完成态pending，完成态resolved，失败态rejected

var p1 = new Promise(function(resolve,reject){
  resolve(1); //同步代码，立即被调用了，状态为完成态
});
var p2 = new Promise(function(resolve,reject){
  setTimeout(function(){
    resolve(2);  // 异步代码，未被执行，状态为未完成态
  }, 500);      
});
var p3 = new Promise(function(resolve,reject){
  setTimeout(function(){
    reject(3);  // 异步代码，未被执行，状态为未完成态
  }, 500);      
});

console.log(p1);
console.log(p2);
console.log(p3);
setTimeout(function(){
  console.log(p2); // 2，延迟执行，此时p2和p3已被then()调用，状态改变
}, 1000);
setTimeout(function(){
  console.log(p3); // 3
}, 1000); 

p1.then(function(value){
  console.log(value);
}); // 1
p2.then(function(value){
  console.log(value);
}); // 2
p3.catch(function(err){
  console.log(err);
}); // 3

执行结果：

Promise { 1 } 
Promise {  }
Promise {  }
1
2
3
Promise { 2 }
Promise {  3 }

状态的不可逆

let p =new Promise(function(resolve, reject) {
    resolve("success")
    resolve("success2")
    reject("reject")
})

p1.then(function(value) {
    console.log(value)
})

执行结果：

"success"

Promise的状态一旦变为resolved或者rejected时，状态就固定下来了，后续的调用resolve或者reject方法都不会改变已有的状态和值

链式调用

let p = new Promise(function(resolve, reject) {
    resolve(1)
})

p.then(function(value) {
    console.log(value) // 1
    return value * 2
}).then(function(value) {
    console.log(value) // 2
}).then(function(value) {
    console.log(value) // undefined
    return Promise.resolve("resolve") //返回resolved状态的promise
}).then(function(value) {
    console.log(value) // "resolve"
    return Promise.reject("reject") // 返回rejected状态的promise
}).then(function(value) {
    console.log("resolve" + value) // 接收成功态的value
}, function(err) {
    console.log("reject" + err) //接收失败态的value reject reject
})

执行结果：

1
2
undefined
"resolve"
"reject: reject"

then方法啊返回一个新的Promise对象，函数的返回值作为then返回的Promise对象

Promise中的异常

var p1 = new Promise( function(resolve,reject){
  foo.bar();
  resolve( 1 );      
});

p1.then(
  function(value){
    console.log("p1 then value: " + value);
  },
  function(err){
    console.log("p1 then err: " + err); // 异常捕获
  }
).then(
  function(value){
    console.log("p1 then then value: "+value); // 之后被正确的函数调用
  },
  function(err){
    console.log("p1 then then err: " + err);
  }
);

var p2 = new Promise(function(resolve,reject){
  resolve( 2 );    
});

p2.then(
  function(value){
    console.log("p2 then value: " + value); // 执行
    foo.bar();
  }, 
  function(err){
    console.log("p2 then err: " + err);
  }
).then(
  function(value){
    console.log("p2 then then value: " + value);
  },
  function(err){
    console.log("p2 then then err: " + err); // 异常捕获
    return 1; // 返回1
  }
).then(
  function(value){
    console.log("p2 then then then value: " + value); // 之后被正确函数的调用
  },
  function(err){
    console.log("p2 then then then err: " + err);
  }
)

执行结果：

p1 then err: ReferenceError: foo is not defined
p2 then value: 2
p1 then then value: undefined
p2 then then err: ReferenceError: foo is not defined
p2 then then then value: 1

异常一旦得到处理，then返回的后续Promise对象将恢复正常，并会被Promise执行成功的回调函数处理。另外，需要注意p1、p2 多级then的回调函数是交替执行的，这正是由Promise then回调的异步性决定的。

resolve

var p1 = Promise.resolve( 1 );
var p2 = Promise.resolve( p1 );
var p3 = new Promise(function(resolve, reject){
  resolve(1);
});
var p4 = new Promise(function(resolve, reject){
  resolve(p1);
});

console.log(p1 === p2); 
console.log(p1 === p3);
console.log(p1 === p4);
console.log(p3 === p4);

p4.then(function(value){
  console.log("p4=" + value);
});

p2.then(function(value){
  console.log("p2=" + value);
})

p1.then(function(value){
  console.log("p1=" + value);
})

控制台输出：

true
false
false
false
p2=1
p1=1
p4=1

Promise.resolve(...)可以接收一个值或者是一个Promise对象作为参数。当参数是普通值时，它返回一个resolved状态的Promise对象，对象的值就是这个参数；当参数是一个Promise对象时，它直接返回这个Promise参数。因此，p1 === p2。但通过new的方式创建的Promise对象都是一个新的对象，因此后面的三个比较结果都是false。另外，为什么p4的then最先调用，但在控制台上是最后输出结果的呢？因为p4的resolve中接收的参数是一个Promise对象p1，resolve会对p1”拆箱“，获取p1的状态和值，但这个过程是异步的

拆箱的概念应该是micro task和macro task吧？？？

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84644.html

promise学习（2）

摘要：所谓的能对状态进行操作的特权方法，指的就是能对对象的状态进行等调用的方法，而通常的的话只能在通过构造函数传递的方法之内对对象的状态进行操作。一般会在构造函数中编写逻辑，什么时候执行回调，什么时候执行回调。原文地址 1. 在then中使用reject 如果一个promise最初只定义了resolve，但是还想要使用reject怎么办？可以在then中返回一个新的promise。这个...

firim 2019-08-23 10:48 评论0 收藏0
ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
Promise源码学习（2）

摘要：源码学习本篇为上一篇源码学习的补充，主要是来介绍和方法。那个率先改变的实例的返回值，就传递给的回调函数。基本介绍可见阮一峰老师的书籍。的状态由决定，分成两种情况。只有的状态都变成，的状态才会变成，此时的返回值组成一个数组，传递给的回调函数。 Promise源码学习（2）本篇为上一篇源码学习（1）的补充，主要是来介绍Promise.all()和Promise.race()方法。闲话少叙...

cfanr 2019-08-22 16:34 评论0 收藏0
Promise学习笔记(二):规范

摘要：下一篇大概就是源码方面的学习笔记了龟速学习中这一次我是去看了下规范照例传送门图灵社区规范首先吧个人总结下该用的词解决结婚拒绝婉拒终值值传家宝拒因好人卡等等异常车祸理下概念我们的的就像是一场姻缘对吧解决呢就是结婚成功啦传家宝也如愿的传给下一代下一篇大概就是源码方面的学习笔记了...龟速学习中... 这一次我是去看了下Promises/A+规范照例传送门:图灵社区Promises/A+规...

_Suqin 2019-08-20 11:03 评论0 收藏0
ES6学习笔记之Promise

摘要：上代码异步执行成功的构造函数接收一个函数参数，并传入两个参数，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。第一个回调函数是对象的状态变为时调用，第二个回调函数是对象的状态变为时调用。这篇文章只解决三个问题。什么是promise? promise有什么用？promise怎么用？ 1.什么是promise？对于ES6来说，就是一个构造函数，可以用new Prom...

zoomdong 2019-08-20 15:27 评论0 收藏0
promise学习（3）

摘要：此时，由于只有一个的状态能够确定，所以执行的是唯一那个确定状态的函数，而不会执行其他的，但是并不会阻止其他的执行。在实际应用中，常用来设置超时操作，比如接口请求超时等。思考这个其实并不是矛盾，接受的是返回的的状态，与原来的没有关系。原文地址 Promise.race // `delay`毫秒后执行resolve function timerPromisefy(delay) { ...

阿罗 2019-08-23 10:48 评论0 收藏0