• 浅谈Promise


    一、什么是Promise?

    (1)Promise时JS中进行异步编程的新的解决方案。(旧的是回调函数)

    (2)从语法上看,Promise是一个构造函数。

    (3)从功能上来说,Promise对象用来封装一个异步操作并可以获取其结果。

    二、Promise的状态

    1.Promise一共有三种状态,pending(准备中)、resolved(成功)、rejected(失败)。

    2.Promise只有两种状态改变:

    (1)pending变为resolved

    (2)pending变为rejected

    3.说明:

    (1)一个Promise对象只有这两种状态变化,且只能改变一次,不可逆的。

    (2)不管成功还是失败,都会有一个结果数据。

    (3)成功的结果一般称为value,失败的结果一般称为reason。

    三、基本使用

    const p = new Promise (( resolve , reject ) => {
           //异步操作 
    });
     
    p.then(
        value =>  {   //成功  },
        reason => {   //失败  }
    )

    四、两种常见方法

    1.Promise.All()

    //创建几个Promise对象
    const p1 = new Promise ( ... );
    const p2 = new Promise ( ... );
     ...
    
    Promise.all([p1,p2 ...]).then(values=>{})

    注意:(1)返回的values是按着前面all的参数顺序的数组。

               (2)只有全部成功才返回,有一个失败则全部不返回。

    2.Promise.race()

    使用同all一样,但是执行多个异步操作时,只保留第一个执行完成的结果,其他的还是会执行完,但是不返回结果。相当于比赛。

    五、Promise和旧的异步编程解决方案相比,为什么要使用Promise?

    (1)旧的:必须在启动异步任务前指定。而Promise是先启动异步任务,返回Promise对象,再给Promise绑定回调函数。

    (2)Promise支持链式调用,可以解决回调地狱问题。

    六、那么什么是回调地狱呢?

    回调函数嵌套调用,外部回调函数异步执行的结果是嵌套的回调函数的条件。

    注意:回调地狱的终极解决方案是:async/await

    七、什么是Promise的异常传递?

    (1)当使用Promise的then链式调用时,可以在最后指定失败的回调。

    (2)前面任何操作出了异常,都会传到最后失败的回调函数中处理。

    注意:中间的所有回调函数都有执行,只是出了异常的那一环开始,后面的回调都会默认执行失败的回调函数,然后抛出异常,到下一环再执行失败,抛出异常,直到最后。

    例如:

    new Promise ((resolove,reject) => {
            reject();   //失败
    }).then(
         value =>{},  //不执行
        // 如果这里不写则默认为
         reason => { throw reason }
    ).then(
         //与上面相同
    ).catch((null,reason) => {
           //这里来处理失败
    });

    八、如何中断Promise链?

    1.什么是中断Promise链?

    当使用Promise的then链式调用时,在中间中断,并且不再调用后面的回调函数了。

    2.方法:在回调函数中返回一个状态为pending的Promise对象即可。

    九、async/await

    1.async函数:

    (1)函数的返回值是一个Promise对象。

    (2)Promise对象的结果有async函数执行的返回值绝定。

    2.await表达式

    (1)await右侧的表达式一般是Promise对象,也可以是其他的值(一般的表达式)。

    (2)如果表达式是Promise对象,await返回的是Promise的成功值,不返回失败的值。

    (3)如果表达式是其他,则该值将直接作为await的返回值。

    3.注意:

    (1)await必须写在async函数中,但async函数中可以没有await。

    (2)如果await的Promise返回失败,会抛出异常,可以通过try...catch来捕获异常。

    十、小谈宏任务和微任务

    1.概念:JS中用来存储执行回调函数的队列包含的两个不同特定的队列。

    2.宏队列:用来保存待执行的宏任务(回调)

    例如:定时器回调、DOM事件回调、ajax回调

    3.微队列:用来保存待执行的微任务(回调)

    例如:Promise的回调(then里的)、MutationObserver的回调

    4.JS执行时会区别这两个队列

    (1)JS引擎首先必须执行所有的初始化同步任务代码

    (2)每次准备取出第一个宏任务来执行前,都要将所有的微任务一个一个取出来执行完成了才可以执行宏任务。

  • 相关阅读:
    上传文件插件-bootstrap-fileinput
    js【jquery】
    html
    CSS3中的vh、vw及其应用场景
    element,点击查看,实现tab切换:
    js 遍历tree的一个例子(全遍历),更复杂的功能
    js 遍历tree的一个例子(全遍历)
    js 遍历tree的一个例子
    您的连接不是私密连接
    Es6中Map对象和Set对象的介绍及应用
  • 原文地址:https://www.cnblogs.com/zyl96/p/12790599.html
Copyright © 2020-2023  润新知