js异步问题,Promise解决回调地狱。
// 获取省 getSheng() { return new Promise((resolve, reject) => { axios.get(BASEURL + '/phone/Controllers/', { params: { _action: "1bd2b39b-c393-4dc9-81e3-2ad37076c461", } }).then(res => { console.log(res); resolve(res); }).catch(error => { console.log(error); reject(error); }); }) }, // 获取市 getShi(e) { return new Promise((resolve, reject) => { axios.get(BASEURL + '/phone/Controllers/', { params: { _action: "8826c52c-276e-4025-a158-c9333424cb90", txtProvinceID: e//省份ID } }).then(res => { console.log(res); resolve(res); }).catch(error => { console.log(error); reject(error); }); }) }, // 获取区 getQu(e) { return new Promise((resolve, reject) => { axios.get(BASEURL + '/phone/Controllers/', { params: { _action: "b88132bd-be02-4be7-bb73-105430b594b1", txtCityID: e//省份ID } }).then(res => { console.log(res); resolve(res); }).catch(error => { console.log(error); reject(error); }); })
//调用
this.getSheng().then(res => {
console.log(res);
if (res.data.code == 1) {
this.$toast(res.data.msg);
} else {
this.option1 = res.data;
return this.getShi(res.data[0].value);
}
// return this.getShi();
}).then(res => {
console.log(res);
if (res.data.code == 1) {
this.$toast(res.data.msg);
} else {
this.option2 = res.data;
return this.getQu(res.data[0].value);
}
// return this.getQu();
}).then(res => {
console.log(res);
if (res.data.code == 1) {
this.$toast(res.data.msg);
} else {
this.option3 = res.data;
}
});
function getUser(call,fail){
if(true){
call(1);
}else{
fail();
}
}
function getGroup(a,call){
call(a)
}
getUser(function(response){ getGroup(response.id, function(group){ getDetails(groupd.id, function(details){ console.log(details) },function(){ alert('获取分组详情失败') }) }, function(){ alert('获取分组失败') }) }, function(){ alert('获取用户信息失败') })
1.
真的,Promise 并不能消灭回调地狱,但是它可以使回调变得可控。你对比下面两个写法就知道了。
getGroup(response.id, success2, error2)
getGroup(response.id).then(success2, error2)
用 Promise 之前,你不能确定 success2 是第几个参数;
2.
小结
Promise 的优点在于,让回调函数变成了规范的链式写法,程序流程可以看得很清楚。它有一整套接口,可以实现许多强大的功能,比如同时执行多个异步操作,等到它们的状态都改变以后,再执行一个回调函数;再比如,为多个回调函数中抛出的错误,统一指定处理方法等等。
而且,Promise 还有一个传统写法没有的好处:它的状态一旦改变,无论何时查询,都能得到这个状态。这意味着,无论何时为 Promise 实例添加回调函数,该函数都能正确执行。所以,你不用担心是否错过了某个事件或信号。如果是传统写法,通过监听事件来执行回调函数,一旦错过了事件,再添加回调函数是不会执行的。
Promise 的缺点是,编写的难度比传统写法高,而且阅读代码也不是一眼可以看懂。你只会看到一堆then
,必须自己在then
的回调函数里面理清逻辑。
参考:https://javascript.ruanyifeng.com/advanced/promise.html#toc0