Promise

2018-09-17  本文已影响0人  royluck

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)
                    }
                })
            },
上一篇下一篇

猜你喜欢

热点阅读