Promise

作者: 微笑的弧度_c50f | 来源:发表于2022-04-28 22:53 被阅读0次

    Promise

    Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理且更强大。它最早由社区提出并实现,ES6将其写进了语言标准,统一了用法,并原生提供了Promise对象。

    特点

    1.对象的状态不受外界影响 (3种状态)

    Pending状态(进行中)
    Fulfilled状态(已成功)
    Rejected状态(已失败)

    2.一旦状态改变就不会再变 (两种状态改变:成功或失败)

    Pending -> Fulfilled
    Pending -> Rejected

    用法

    创建Promise实例
    let promise = new Promise(function(resolve, reject){
        // 你自己的异步逻辑代码
        
        if (/* 异步操作成功 */) {
            resolve(value);
        } else { // 异步操作失败
            reject(error);
        }
    })
    

      Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolvereject。它们是两个函数,由JavaScript引擎提供,不用自己部署。

      resolve作用是将Promise对象状态由“未完成”变为“成功”,也就是Pending -> Fulfilled,在异步操作成功时调用,并将异步操作的结果作为参数传递出去;
      而reject函数则是将Promise对象状态由“未完成”变为“失败”,也就是Pending -> Rejected,在异步操作失败时调用,并将异步操作的结果作为参数传递出去。

    then

      Promise实例生成后,可用then方法指定一种状态回调参数:

    1.Promise对象状态改为Resolved时调用 (必选)

    备注:通俗的讲 resolve => then

    catch

      Promise实例生成后,可用catch方法指定一种状态回调参数:
    1.Promise对象状态改为Rejected时调用 (可选)

    备注:通俗的讲 reject => catch

    基本用法示例
    function sleep(num) {
        return new Promise(function(resolve, reject) {
           if (num>10){
              resolve('成功')                      
           } else {
              reject('失败')     
           }  
        })
    }
    sleep(500).then( res=> console.log(res)).catch(err => console.log(err));
    

      这段代码定义了一个函数sleep,调用后,如果传入的实参大于10,你会发现他会触发then的回调函数,并且打印出成功,如果传入的实参小于10,你会发现他会触发catch的回调函数,并且打印出失败。

    执行顺序

      接下来我们探究一下它的执行顺序,看以下代码:

    let promise = new Promise(function(resolve, reject){
        console.log("AAA");
        resolve()
    });
    promise.then(() => console.log("BBB"));
    console.log("CCC")
    
    // AAA
    // CCC
    // BBB
    

    执行后,我们发现输出顺序总是
    AAA -> CCC -> BBB。表明,在Promise新建后会立即执行,所以
    首先输出 AAA。然后,then方法指定的回调函数将在当前脚本所有同步任务执行完后才会执行,所以BBB 最后输出。

    与定时器混用

      首先看一个下面的代码:

    let promise = new Promise(function(resolve, reject){
        console.log("1");
        resolve();
    });
    setTimeout(()=>console.log("2"), 0);
    promise.then(() => console.log("3"));
    console.log("4");
    
    // 1
    // 4
    // 3
    // 2
    

    可以看到,结果输出顺序总是:
    1 -> 4 -> 3 -> 2。1与4的顺序不必再说,而2与3先输出Promise的then,而后输出定时器任务。原因则是Promise属于JavaScript引擎内部任务,而setTimeout则是浏览器API,而引擎内部任务优先级高于浏览器API任务,所以有此结果。

    相关文章

      网友评论

          本文标题:Promise

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