Promise

作者: royluck | 来源:发表于2018-09-17 10:37 被阅读0次

    Promist 对象

    理解:将它当作一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果

    特点:
    1.状态不受外界影响:只有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)只有异步结果才能决定当前哪个状态
    2.一旦状态改变,就不会再变,任何时候都能得到这个结果(凝固 resolved

    缺点:
    1.一旦创建,无法取消
    2.如果不设置回调函数,Promise内部抛出的错误,不会反应到外部
    3.当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)

    普通写法:
    写法1:
      const promise = new Promise(function(resolve,rejected){
            // code...   执行内容
            return resolve('done')
            // 表示成功执行,即fulfilled状态,后续then()将会接收到resolve返回的值'done'
            // 加上return,是为了不继续执行后续的代码,不建议resolve后面还写操作代码
          })
          promise.then(function(val){
            console.log(val)  //done
          })  
    写法2:
      const promise = function(){
            return new Promise(function(resolve,reject){
                console.log('pending....')
                setTimeout(function(){
                return resolve('fulfilled')
               },2000)
            })
          }
          promise().then(function (val) {
            console.log(val)  //fulfilled
          })
      }
    

    疑问汇总:

    1. 如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

    2.如果某些事件不断地反复发生,一般来说,使用 Stream 模式是比部署Promise更好的选择。


    实际应用场景:

    假设场景,商品确定页面有多种抵扣选择,优惠券抵扣、美丽金抵扣、黄金抵扣,
    每种抵扣都是单独的异步请求,需要获取全部请求成功之后,根据返回的抵扣力度,
    择优选择抵扣额最高的优惠券为推荐选择

                /**优惠券抵扣*/
                let discount1 =  new Promise((resolve,rejecet)=>{
                    setTimeout(()=>{
                        let val
                        val = 6.6
                        resolve(val)
                    },1000)
                })
                /**美丽金抵扣*/
                let discount2 =  new Promise((resolve,rejecet)=>{
                    setTimeout(()=>{
                        let val
                        val = 8.8
                        resolve(val)
                    },6000)
                })
                /**黄金抵扣*/
                let discount3 =  new Promise((resolve,rejecet)=>{
                    setTimeout(()=>{
                        let val
                        val = 9.9
                        resolve(val)
                    },2000)
                })
                Promise.all([discount1,discount2,discount3])
                    .then((e)=>{
                        let val = Math.max(...e)
                        console.log('最大优惠卷额度:'+val)  //9.9
                    })
    
    
    // 首次进来获取navid
          async getNavId(){
             await new Promise(resolve=>{
              this.getGroup(resolve)
            }).then( _navArg=>{
               this.navId = _navArg[0].id
             })
          },
    
     // 获取所有客户列表
                async getAjaxAllList() {
                    this.loading = true    // 加载中
                    let _p = this.p
                    if(_p === 1){   // 优化页面展示顺序,优先显示新增企业微信,再显示后续的
                        await new Promise ((resolve, reject)=>{
                            this.getAjaxList(resolve)
                        })
                    }
                    const params = {
                        token: localStorage.token,
                        groupid: 0,  // 客户分组id
                        limit: 10,
                        p: this.p++
                    }
                    Http.ai['salesman/customer/listcustomer'](params)
                    (e => {
                        if(e.code == 0){
                            let list = e.data.list
                            this.loading = false;
                            if(list.length === 0){
                                this.finished = true; // 没有更多
                            }
                            this.listArg = this.listArg.concat(list)
    
                            if(_p === 1){
                                // this.getAjaxList()
                            }
    
                        }else {
                            Config.totast(e.msg)
                        }
                    })
                },
    

    相关文章

      网友评论

          本文标题:Promise

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