ES6-Promise

学过ES6的同学大概都知道Promise,可想而知Promise在ES6中很重要。

Promise对象代表了未来将要发生的事件,用来传递异步操作的消息。Promise是一个构造函数,有属于自己私有的all,reject,resolve,rece等方法,也有原型上面的,属于实例对象调用的方法then,catch。

Promise对象特点

1.对象的状态不受外界影响。

Promise对象代表一个异步操作,有三种状态:
Fulfilled 可以理解为成功的状态
Rejected 可以理解为失败的状态
Pending 初始状态,不是成功也不是失败状态,可以理解为 Promise 对象实例创建时候的初始状态
Promise英文“承诺”的意思,所以说只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。

2.一旦状态改变,就不会再变,任何时候都可以得到这个结果。

Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。
只要这两种情况发生,状态就不会再变了。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

Promise 对象方法resolve, reject和then

1.resolve 方法可以使 Promise 对象的状态改变成成功,同时传递一个参数用于后续成功后的操作。
2.reject 方法则是将 Promise 对象的状态改变为失败,同时将错误的信息传递到后续错误处理的操作。
3. then 方法,这个方法接受两个参数,第一个是处理 resolved 状态的回调,一个是处理 rejected 状态的回调。

Promise 构造函数包含一个参数和一个带有 resolve(解析)和 reject(拒绝)两个参数的回调。
在回调中执行一些操作(例如异步),如果一切都正常,则调用 resolve否则调用 reject
下面看一个例子

var myFirstPromise = new Promise(function(resolve, reject){
//当异步代码执行成功时,调用resolve(), 失败时调用reject()
//这个例子中,我们使用setTimeout()来模拟异步代码
setTimeout(function(){
     resolve("成功啦啦啦啦123!"); //代码正常执行!
    }, 250);
});
myFirstPromise.then(function(successMessage){
//successMessage的值是上面调用resolve()方法传入的值.
    document.write("Yay! " + successMessage);
    //Yay!成功啦啦啦啦123!
});

接下来我们看看then的语法

p.then(onFulfilled, onRejected);
p.then(function(value) {
// fulfillment
}, function(reason) {
// rejection
});

onFulfilled,当Promise变成接受状态(fulfillment)时,该参数作为回调函数被调用,该函数有一个参数,即接受的值(the fulfillment value)
onRejected,当Promise变成拒绝状态(rejection )时,该参数作为回调函数被调用,该函数有一个参数,即拒绝的原因(the rejection reason)

当然上面的代码只是then()的语法,还是看看例子比较实在

let p1 = new Promise(function(resolve, reject) {
  resolve("Success!");
  // or
  // reject ("Error!");
});
p1.then(function(value) {
   console.log(value);       // Success!
   }, function(reason) {
    console.log(reason);     // Error!
});

在上面例子中有两个参数resolve和reject,如果成功则返回值,失败则返回原因。
catch方法
下面看一个综合的栗子

function getNumber(){
  var p = new Promise(function(resolve, reject){
  //做一些异步操作
   setTimeout(function(){
   var num = Math.ceil(Math.random()*10); //生成1-10的随机数
    if(num<=5){
          resolve(num);
            }
     else{
          reject('数字太大了');
            }
      }, 2000);
 });
   return p;            
}
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});

在这个例子中生成一个随机数,对这个随机数进行判断
如果小于等于5,打印resolved和这个随机数
如果大于5,打印rejected和原因

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值