ES6 Promise(承诺)看这一篇就够了

Posted 奥特曼 

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6 Promise(承诺)看这一篇就够了相关的知识,希望对你有一定的参考价值。

一、什么是promise

我们通常都会去 new 一个Promise,什么东西可以new啊? 是不是构造函数可以new, 通过控制台dir一下Promise   

 通过上面的输出,你可以知道promise是一个构造函数,而上面常见的几个方法,resolve、reject、catch、resolve 你不需要立即知道它是干嘛的,接下来 听鹅说

 Promise是Es6新增的构造器,用来提优化异步代码的写法,Promise中文意为承诺,承诺它一段时间后返回给你最终的结果。

首先了解三个状态,用setTimeout模拟实现一个ajax

        pending===》resolve(fulfilled)

     let p1 = new Promise((resolve)=>{
            setTimeout(() => {
                resolve(1)
            }, 2000);
        })
        console.log(p1);

 pending===》rejcet(rejected)

 let p1 = new Promise((resolve,reject)=>{
            setTimeout(() => {
                reject(1)
            }, 2000);
        })
        console.log(p1);

三个状态

  • 待定(pending): 初始状态,既没有被兑现,也没有被拒绝。
  • 已兑现(fulfilled): 意味着操作成功完成。
  • 已拒绝(rejected): 意味着操作失败。

 举个栗子吧,小秃和小花去表白,小秃说 我喜欢你,你喜欢我吗? 这时候 小花肯定有两种回复 答应和拒绝

pedding:你可以理解为小秃正则等待小花的回复,但是目前没有回复的准确结果,例如上面代码的setTimeout 等待的2秒就是等待时间

fulfilled:  代表 我同意啦 我也暗恋你很久了! 

rejected: 代表 你不配 渣男!

二、 Promise格式及PromiseState

相信 我对上面的balabala 已经提取你学习promise的兴趣了,接下来进入正题 学习一下promise格式定义

 // 箭头函数   
 let p1 = new Promise((resolve,reject)=>{})
 // 普通声明
 let p2 = new Promise(function (resolve,reject) {}) 
  

创建promise对象时,它的参数是一个函数 如果他会报错  Uncaught TypeError: Promise resolver undefined is not a function at new Promise (<anonymous>)

而这个函数中的两个形参(resolve,reject) 也是函数形式,但这两个只是形参的名字 实际上你写什么都可以,只不过我们通常约定 写着两个形参名

(1)pending 

pending:待定,是一个等待最终结果的状态,也是一个初始状态,如果你在函数中不调用resolve,reject最终都是一个一直等待的状态,但是不调用,并没有什么意义,一般常用与调用resolve、reject给与相应的状态,总结:你只需要知道这是一个等待最终结果的状态,至于之后会发生状态,并不会知道

 let p1 = new Promise((resolve,reject)=>{})

(2)fulfilled 或 resolved

fulfilled代表已兑现、成功 ,意思是承诺兑现了 从pending====>fulfilled 的过程,在之前的浏览器版本可能会出现resolved的情况都是代表成功,当调用resolve函数时 就会进入成功(fulfilled )的状态

         let p1 = new Promise((resolve,reject)=>{
             resolve(1)
         })

PromiseState代表状态,PromiseResult 代表值 resolve、reject 调用时传入的数据

(3)rejected

rejected: 代表拒绝,失败,意思是承诺没有实现从pending=》rejected的过程  当调用 失败(reject)的状态

         let p1 = new Promise((resolve,reject)=>{
            reject(1)
         })

 小结 

最初创建对象的状态是pending     当调用了 resolve方法时 就会进入 fulfilled 状态         当调用reject方法 就会进入 rejected 状态

当状态一旦发送改变 就不会重新改变  例如已经从pending  到 fulfilled 了就不会重新改变到 rejected

         let p1 = new Promise((resolve,reject)=>{
            resolve()
            reject()
         })
        console.log(p1);

在上面的代码只会从 pending状态到fulfilled状态,并不会去执行最后的rejected 状态

三、PromiseResult

         let p1 = new Promise((resolve,reject)=>{
            resolve(1)
         })
        console.log(p1);

 通过resolve和rejected传入参数时通过打印就会发现PromiseResult的值(值可以是任意数据类型),怎么拿到PromiseResult的值呢

new Promise((resolve,reject)=>{
            resolve('123')
         }).then(res=>console.log(res+'成功就会执行'))
           .catch(err=>{console.log(err+'失败就会执行')})
           .finally(()=>{console.log('不管成功还是失败都会执行');})

在then和catch方法中它的参数是一个回调函数,在这个回调函数中的参数中就可以拿到resolve传过来的值,也就是promiseValue,

当调用resolve函数时传过去的参数就会到.then中的回调函数的参数中    状态pending===》fulfilled

当调用reject函数时传过去的参数就会到.catch 中的回调函数的参数中     状态pending===》rejected

当然 你也可以省略定义p1的写法 

        new Promise((resolve,reject)=>{
            resolve('123')
         }).then(res=>console.log(res+'成功就会执行'))
           .catch(err=>{console.log(err+'失败就会执行')})
           .finally(()=>{console.log('不管成功还是失败都会执行');})

 .then中也可以写两个参数   第二个参数是可选的

当状态是pending===》fulfilled状态时会到.then中的第一个参数中的函数  pending===》rejected  回到.then中的第二个参数中的函数

       new Promise((resolve,reject)=>{
            reject(123)
         }).then((res)=>{ console.log(res+'成功') },
                 (err)=>{ console.log(err+'失败') })

当你不去接收处理的 rejected状态时  会报出Uncaught (in promise)   中文意为未兑现(承诺)

          new Promise((resolve,reject)=>{
            reject(123)
         }).then((res)=>{ console.log(res+'成功') })

 四、promise链式调用

 在了解链式调用之前 先知道在这个.then函数中返回的是仍一个新的promise对象

        let p1 = new Promise((resolve,reject)=>{
            resolve('123')
         })
        let p2 =  p1.then(res=>{})
        console.log(p2);
        console.log(p1===p2); //false

p2中的PromiseResult 拿到的返回值是p1.then 函数中的返回值而p1.then函数中 没有返回值  那么返回值就是undefined

p2的PromiseResult    =    p1.then的返回值  

为什么p2拿到的状态是fulfilled呢?不是rejected

1. 当.then中返回的不是promise对象时(包括undefined),p2的状态 一直都是fulfilled 

2.只有当.then中的 返回的是promsie对象 并且调用的状态是reject()就会失败 rejected 

例如下面这个例子就会返回 rejected 

        let p2 =  p1.then(()=>{
         let p = new Promise((resolve,reject)=>{
            reject()
          })
         return p
        })
        console.log(p2);

当 .then函数中出现错误时 p2拿到的PromiseState的值是rejected,PromiseValue拿到的值是.then中出现的错误

        let p1 = new Promise((resolve, reject) => {
            resolve()
        });
        let p2 = p1.then(()=> {
            console.log(a); // 这里故意犯错
        });
        console.log(p2);

 

既然 p2 也是一个promise对象 我们就可以继续使用.then, 接下来 链式调用就开始了

    let p1 = new Promise((resolve, rejected) => {
            resolve(1)
        })
        let p2 = p1.then((res) => {
           console.log(res);  //1
           return 2
        })
        p2.then((res)=>{
           console.log(res);  //2
        })

 你当然页可以省略定义变量名  一直.then .then ~~的写

  new Promise((resolve, rejected) => {
            resolve(1)
        }).then((res) => {
           console.log(res);
           return 2
        }).then((res) => {
           console.log(res);
        })

五、回调地狱

模拟ajax 回调地狱 每次调用setTimeout 都是拿到上一次的值-1

        function fn1(a) {
            setTimeout(() => {
                console.log(a);
                a--;
                setTimeout(() => {
                    console.log(a);
                    a--
                    setTimeout(() => {
                        console.log(a);
                        a--
                        setTimeout(() => {
                            console.log(a);
                            a--
                            setTimeout(() => {
                                console.log(a);
                            }, 1000);
                        }, 1000);
                    }, 1000);
                }, 1000);
            }, 1000);
        }
        fn1(5)

 看到上面的代码 像不像地狱级别的嵌套 如果每次ajax 都要拿上一次的值去发ajax 造成了很不好的维护性,读代码也很困难,如果解决呢,这就用到了promise

错误写法

 promise为什么能解决回调地狱  例如下面这个例子并没有去解决回调地狱  仍然造成了回调地狱 

        function fn1(a) {
            new Promise((res, rej) => {
                    res(a)
                })
                .then((params) => {
                    return new Promise((res, rej) => {
                        setTimeout(() => {
                            console.log(params);
                            res(--params)
                            return new Promise((res, rej) => {
                                setTimeout(() => {
                                    console.log(params);   res(--params)
                                    return new Promise((res, rej) => {
                                        setTimeout(() => {
                                            console.log(params);   res(--params)
                                                return new Promise((res, rej) => {
                                                 setTimeout(() => {
                                                  console.log(params);   res(--params)
                                                  return new Promise((res, rej) => {
                                                    setTimeout(() => {
                                                        console.log(params);   res(--params)
                                                        }, 1000)
                                                    })
                                                }, 1000)
                                          })
                                        }, 1000)
                                    })
                                }, 1000)
                            })
                        }, 1000)
                    })
                })

        }
        let a = 5
        fn1(a)

注意 优化成promise并不是在一个 .then里面 继续做操作   包括你在.then里继续new一个promise  并且一直嵌套这.then.then 还是会产生回调地狱,

正确写法

优化成 promise 发现就不会出现嵌套关系,而且不管写多少个 也是条条有序

    function fn1(a) {
          new Promise((res,rej)=>{
                res(a)
            })
            .then((params)=>{
              return  new Promise((res,rej)=>{
                setTimeout(() => {  console.log(params);res(--params) }, 1000) }) 
             })
             .then((params)=>{
              return  new Promise((res,rej)=>{
                setTimeout(() => {  console.log(params);res(--params) }, 1000) }) 
             })
             .then((params)=>{
              return  new Promise((res,rej)=>{
                setTimeout(() => {  console.log(params);res(--params) }, 1000) }) 
             })
             .then((params)=>{
              return  new Promise((res,rej)=>{
                setTimeout(() => {  console.log(params);res(--params) }, 1000) }) 
             })
             .then((params)=>{
              return  new Promise((res,rej)=>{
                setTimeout(() => {  console.log(params);res(--params) }, 1000) }) 
             })        
         }
         let a=5
         fn1(a)

实例中优化

在下面中的demo中 在一个.then中又嵌套了两次.then  这就造成了回调地狱 ,你不需要关系内容 只需要知道如何解决

  return new Promise((resolve, reject) => {
        if (ctx.rootState.user.profile.token) {
          // 没有修改登录后的sku接口
          const oldGoods = ctx.state.list.find(it => it.skuId === oldSkuId)
          console.log(newSku)
          // 删除 拿到之前的skuId删除
          deleteCart([oldSkuId]).then(() => {
            // 添加最新的sku进入购物车
            return insertCart({ skuId: newSku.value.skuId, count: oldGoods.count }).then(() => {
              // 请求最新的数据
              return findCartList().then((data) => {
                ctx.commit('setCartList', data.result)
                resolve()
              })
            })
          })

优化 

return new Promise((resolve, reject) => {
        if (ctx.rootState.user.profile.token) {
          // 没有修改登录后的sku接口
          const oldGoods = ctx.state.list.find(it => it.skuId === oldSkuId)
          console.log(newSku)
          // 删除 拿到之前的skuId删除
          deleteCart([oldSkuId])
            .then(() => { // 添加最新的sku进入购物车
              insertCart({ skuId: newSku.value.skuId, count: oldGoods.count })
              console.log(1)
            })
            .then(() => { findCartList();  })
            .then((data) => {
              ctx.commit('setCartList', data.result)
              resolve()
            })

再次优化 省略箭头函数中的大括号

      return new Promise((resolve, reject) => {
        if (ctx.rootState.user.profile.token) {
          // 没有修改登录后的sku接口
          const oldGoods = ctx.state.list.find(it => it.skuId === oldSkuId)
          console.log(newSku)
          // 删除 拿到之前的skuId删除
          deleteCart([oldSkuId])
          // 添加最新的sku进入购物车
            .then(() => insertCart({ skuId: newSku.value.skuId, count: oldGoods.count }))
            .then(() => { findCartList(); console.log(2) })
            .then((data) => {
              ctx.commit('setCartList', data.result)
              resolve()
            })

以上是关于ES6 Promise(承诺)看这一篇就够了的主要内容,如果未能解决你的问题,请参考以下文章

Tcpdump 看这一篇就够了

MyBatis多条件查询看这一篇就够了

@Override 看这一篇就够了

TypeScript 与 JavaScript 的区别(TypeScript万字基础入门,了解TS,看这一篇就够了)

Elasticsearch入门,看这一篇就够了

Elasticsearch入门,看这一篇就够了