• 66、深入理解 promise:promise的三种状态与链式调用


    https://www.jianshu.com/p/dc61ea153874

    https://blog.csdn.net/endeavor_no1/article/details/83416949

    promise出现的目的一为处理JavaScript里的异步,再就是避免回调地狱。

    一、promise的三种状态和基础使用

    promise有三种状态:pending/reslove/reject 。pending就是未决,resolve可以理解为成功,reject可以理解为拒绝。

    一个简易的promise例子:

    let promiseDemo = new Promise((resolve, reject) => {
      // code
      resolve('success')
      // code 
      reject('failed') 
    })
    
    promiseDemo.then((result) => {
      console.log(result)
    }, (result) => {
      console.log(result)
    })
    

    promise的最终状态会凝固,成功了以后即便再执行reject('failed')状态也不会改变。

    二、promise的then方法传参的几种方式

    第一种就是上面的例子:

    promiseDemo.then((result) => {
      console.log(result)
    }, (result) => {
      console.log(result)
    })
    

    第二种就是把第一种方法的第二个函数拿出来做为catch,效果和第一种一样:

    promiseDemo.then((result) => {
      console.log(result)
    }).catch((result) => {
      console.log(result)
    })
    

    第三种,也可以只单独接收一种状态:

    promiseDemo.then((result) => {
      console.log(result)
    })   //只接收成功状态
    
    promiseDemo.catch((result) => {
      console.log(result)
    })    // 只接收失败状态,可以看成第三种的简写形式
    
    promiseDemo.then(null, (result) => {
      console.log(result)
    })   //只接收失败状态
    
    三、promise的链式调用(分两种情况讨论)

    promise的 then 方法之后会继续返回一个promise对象

    例子如下:

    let test = new Promise((resolve, reject) => {
        let random = Math.random()
        if (random > 0.5) {
            resolve('大于0.5')
        } else {
            reject('小于等于0.5')
        }
    })
    
    let p = test.then((result) => {
        console.log(result)
        return result
    }).catch((result) => {
        console.log(result)
        return result
    }).then((result) => {
        console.log(result)
        return result
    }).then((result) => {
        console.log('last', result)
    })
    
    console.log(p)
    

    使用node执行后的结果如下:

    这是p:  Promise { <pending> }
    大于0.5
    大于0.5
    last 大于0.5
    

    从结果我们可以看出:使用then方法之后会返回一个promise对象,可以继续用then方法调用,再次调用所获取的参数是上个then方法return的内容;同时,我们还看到p先被打印出来,证明promise本身就是异步的,而且p本身也是一个pending状态的promise对象。

    上面的这个例子只是一种情况,即第一次then之后所返回promise不会出现reject的状态,但如果我们在第一次then之后再手动返回一个可能包含reject状态的promise的话,那么错误链式调用过程中的错误处理就是大问题了,因为第二次then是不带错误处理机制的,这就要求我们在promise里的reject状态里直接写上对应的错误处理机制。具体的例子可以参见下篇文章。

    四、使用Promise.resolve()快速获取一个成功状态的promise对象
    let a = Promise.resolve(123)
    
    a.then((result) => {
        console.log(result)   // 123
    })
    
    let b = Promise.resolve({name:'xiaoming', age:18})
    
    b.then((result) => {
        console.log(result)   // {name:'xiaoming', age:18}
    })
    

    上面的例子表示:我们可以通过Promise.resolve()将一个字符串、数字或者对象等转换成一个成功状态的Promise对象。

    但是如何我们将一个promise对象作为参数传递给Promise.resolve()方法会怎么样呢?

    let test = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('success')
        }, 1000)
    })
    
    let p = Promise.resolve(test)
    
    console.log(p === test)   //true
    

    从结果上看:将一个promise对象传递给Promise.resolve()方法会被直接返回。

    五、使用Promise.reject()快速获取一个拒绝状态的promise对象

    使用方法和Promise.resolve一致。



    作者:李悦之
    链接:https://www.jianshu.com/p/dc61ea153874
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    WinForm 自定义查询
    维护应用程序状态(三):使用用户配置文件
    解决无法获取 GridView 中BoundField 隐藏列值问题
    Nhibernate Unknown entity class 的解决办法
    GridView 18般绝技(转)
    IsPostBack介绍
    "ESLG.CommonUtility.NHibernateHelper"的类型初始值设定项引发异常
    Visible和style.display的不同
    维护应用程序状态(二):使用会话状态
    AS3与PHP通信的五种方法(基于HTTP协议)
  • 原文地址:https://www.cnblogs.com/dream111/p/13479416.html
Copyright © 2020-2023  润新知