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
})
}
疑问汇总:
如果改变已经发生了,你再对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)
}
})
},