美文网首页
ES6之promise的常用简单总结

ES6之promise的常用简单总结

作者: yun_blog | 来源:发表于2020-05-18 17:24 被阅读0次

1.promise是什么

promise用于异步操作,它表示一个当前尚未完成,预计在未来一定会完成的异步操作。
promise对象有三个状态,分别是进行中,已成功,已失败,三种状态,任何时候状态只能由进行中变为已成功或者用进行中变为已失败两种情况,当状态已确定就不会再改变,并且可以在任何时候的带这个结果。

2.promise怎么用

let promise = new Promise(function(resolve, reject) {
    if(true) {
      resolve();
    } else{
        reject();
    }
});

promise.then(function() {
  console.log('resolved.');
}, function() {
    console.log('rejected.');
});

由上面的简单例子可以知道
1.Promise是一个构造函数,该构造函数接受一个函数作为参数,该函数的两个参数分别是resolvereject。他们是两个函数,由js引擎提供不用自己部署。
resolve函数作用是将promise对象的状态从未完成变为成功。
reject函数的作用是将promise对象的状态从未完成变成失败。

2.then方法接受两个callback作为参数,第一个callback是在promise对象状态变为成功时调用,第二个callback是在promise对象状态变为失败时调用。

3.promise常用方法用什么

  • then方法
    then方法的第二个参数是可选的。
    then方法返回的是一个全新的Promise实例,因此可以采用链式的写法,即then方法后面再调用一个then方法。

    let promise = new Promise(function(resolve, reject) {
       resolve('hello');
    });
    
    promise.then(function(e) {
      console.log('e1', e);
      return e;
    }).then(function(e) {
      console.log('e2', e);
    });
    
    

    以上就是一个简单的then方法链式调用的用法。看完这个例子可能会有一些疑问
    1.两个then方法中的callback的参数e是从哪来的?
    第一个then方法的callback参数的参数e是由实例promise中的resolve()方法传入的,第二个then方法的callback参数的参数e是由第一个then方法中return出来的。
    因此,e1,e2的值均为'hello'。
    2.那如果第一个then方法不使用return返回值呢?
    如果不使用return返回,那e2的值就是undefined。就是说第二个then方法拿不到前一个then方法返回的新Promise实例。
    由上我们可以得出,实例中如果调用resolve函数或reject函数时带有参数,那么这个参数会被传入到then方法中的callback中作为参数。
    另外如果要链式调用then方法,那么前一个then方法返回的Promise实例需要显式的返回,即return出来。

  • catch方法
    catch方法是.then(null, function(){})或.then(undefined, function(){})的别名,用于指定发生错误时的回调函数。如果then方法抛出错误,也会被起后面的catch方法捕获;因此建议总是使用catch方法,而不是使用then的第二个参数。如果没有使用catch方法处理错误,Promise对象抛出的错误不会传递到外层代码。这个是与try/catch的不同之处

  • all方法
    该方法用于将多个Promise实例包装成一个新的Promise实例。

    const p = Promise.all([p1, p2, p3]);
    

    p的状态有p1, p2, p3共同决定,只有当p1, p2, p3均是成功状态时p才变为成功状态,其他情况均为失败状态。

4.来源

以上总结主要来自于阮一峰的ES6入门教程之promise一章

相关文章

网友评论

      本文标题:ES6之promise的常用简单总结

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