一、Promise对象
承诺一定会实现,更简单的处理异步请求。同时更加方便使用链式调用。
缺点:Promise对象状态不会改变,Promise操作不可中断,只要执行无法取消,也无法确定内部执行的状态。
1.语法
new Promise( function(resolve, reject) {...} /* executor */ );
2.状态
- pending:初始状态
- fulfilled:操作成功完成
- rejected:操作失败
3.方法
Promise.prototype.catch(onRejected)
添加一个否定(rejection) 回调到当前 promise, 返回一个新的promise。如果这个回调被调用,新 promise 将以它的返回值来resolve,否则如果当前promise 进入fulfilled状态,则以当前promise的肯定结果作为新promise的肯定结果。——MDN
Promise.prototype.then(onFulfilled,onRejected)
添加肯定和否定回调到当前 promise, 返回一个新的 promise, 将以回调的返回值 来resolve。——MDN
二、Promise使用(三个表格联动)
先是掉第一个接口数据,拿到数据的第一个数据后作为参数掉第二个接口,在拿到数据后,作为第三个参数掉第三个接口。
重点:使用链式调用
// 链式调用的前提要return Promise对象,返回后才能使用then()方法调用到
getProviceList: ({commit, state}, params) => {
return API.getProviceListApi(params).then(res => {
commit(types.HIDE_PAGE_LOADING)
commit(types.GET_PROVICE_LIST, res.data)
return res.data
}, function () {
console.log('错误')
})
}
// 三个接口链式调用
this.getNormalList()// 第一个
.then((res) => {//第二个
this.modelId = res[0].MODELID
this.getNormalProvinceList({
'mobileCode': this.modelId
})
.then((res) => {// 第三个
this.provinceId = res[0].ID
this.getNormalDataList({
'provinceCode': this.provinceId,
'mobileCode': this.modelId
})
})
})
效果图
表格三级联动
网友评论