网络请求的回调地狱:
一个url1从服务器加载一个数据data1,data1中包含了下一个请求的url2
data1取出url2,从服务器加载数据data2,data2中包含了下一个请求的url3
data2取出url3,从服务器加载数据data3,data3中包含了下一个请求的url4
发送网络请求url4,获取最终的数据data4
上面代码问题:
正常情况下,不会有什么问题,可以正常运行并且获取结果。
但是这样代码难看且不易维护
解决方法:
使用Promise,Promise可以以一中非常优雅的方式来解决这个问题
下面的demo分别展示了旧式的层层嵌套和promise的链式操作获取:
<template>
<div>
<button
@click="nomarlClick"
style="height:40px;color:#666;border:1px solid #ccc;"
>
点击获取异步层层嵌套取得的数据old
</button>
<button
@click="promiseClick"
style="height:40px;color:hotPink;border:1px solid #ccc;"
>
点击获取异步层层嵌套取得的数据promise
</button>
</div>
</template>
<script>
export default {
name: "profile",
data() {
return {};
},
methods: {
// 点击获取异步层层嵌套取得的数据old
nomarlClick() {
setTimeout(() => {
console.log("hello");
console.log("hello");
console.log("hello");
console.log("hello");
setTimeout(() => {
console.log("hello Vue");
console.log("hello Vue");
console.log("hello Vue");
console.log("hello Vue");
setTimeout(() => {
console.log("hello Promise");
console.log("hello Promise");
console.log("hello Promise");
console.log("hello Promise");
setTimeout(() => {
console.log("hello end");
console.log("hello end");
console.log("hello end");
console.log("hello end");
}, 1000);
}, 1000);
}, 1000);
}, 1000);
},
// 点击获取异步层层嵌套取得的数据promise
// 参数 -> 函数(resolve[解决],reject[拒绝])
// resolve和reject本身他们有事函数
promiseClick() {
new Promise((resolve, reject) => {
// 第一次网络请求的代码
// 成功时调用resolve;
resolve("hello");
// 失败时调用reject
reject("error msg");
})
.then(data => {
// 第一次拿到结果的处理代码
console.log(data);
console.log(data);
console.log(data);
console.log(data);
return new Promise((resolve, reject) => {
// 第二次网络请求的代码
resolve("hello Vue");
})
.then(data1 => {
// 第二次拿到结果的处理代码
console.log(data1);
console.log(data1);
console.log(data1);
console.log(data1);
return new Promise((resolve, reject) => {
// 第三次网络请求的代码
resolve("hello Promise");
})
.then(data2 => {
// 第三次拿到结果的处理代码
console.log(data2);
console.log(data2);
console.log(data2);
console.log(data2);
return new Promise((resolve, reject) => {
// 第四次网络请求的代码
resolve("hello end");
})
.then(data3 => {
// 第四次拿到结果的处理代码
console.log(data3);
console.log(data3);
console.log(data3);
console.log(data3);
})
.catch(err => {
// 失败时
});
})
.catch(err => {
// 失败时
});
})
.catch(err => {
// 失败时
});
})
.catch(err => {
// 失败时
});
}
}
};
</script>