今天要分享一个东西--关于ES7 async结合Fetch异步编程问题。
ES7 async/await被称作异步编程的终极解决方案，我们先不管这个称呼，咱们先总结一下，我们一路走来异步编程是如何产生，到最后如何解决的。
方案并不完美，我们通过代码来说明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var a = 12;
//模拟数据交互需要等1秒钟
function loadData() {
setTimeout(function () {
a = 666;
}, 1000)
}
loadData();
console.log(a);
</script>
</head>
<body>
</body>
</html>
不用想，这个结果就是 12 而不是666，因为程序不会等1s才往下执行，但是有时候又必须使用数据，所以只能嵌套。但是嵌套多了又会出现下面的问题,案例来自SF的朋友，特此感谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
setTimeout(function () {
console.log("第一个异步回调了！")
setTimeout(function () {
console.log("第二个异步回调了！")
setTimeout(function () {
console.log("第三个异步回调了！")
setTimeout(function () {
console.log("第四个异步回调了！")
setTimeout(function () {
console.log("第五个异步回调了！")
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}, 1000);
</script>
</head>
<body>
</body>
</html>
我特意写了一个程序，这下大家就能体会他的缺陷。
那我们怎么解决呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, "finish");
});
}
timeout(2000)
.then(value => {
console.log("第一层" + value);
return timeout(2000);
})
.then(value => {
console.log("第二层" + value);
return timeout(2000);
})
.then(value => {
console.log("第三层" + value);
return timeout(2000);
})
.then(value => {
console.log("第四层" + value);
return timeout(2000);
})
.then(value => {
console.log("第五层" + value);
return timeout(2000);
})
.catch(err => {
console.log(err);
});
</script>
</head>
<body>
</body>
</html>
Promise改成了链式，但是不够完美，重点来了，今天的知识如何使用ES7 的async和await 让我们跟我们写日常普通代码一样写异步代码呢？
大家发现了吧，这样写是不是正确并且简单了啊，仅仅是加了两个单词而已,完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, "finish");
});
}
async function asyncTimeSys() {
await timeout(1000);
console.log("第一层异步结束！")
await timeout(1000);
console.log("第二层异步结束！")
await timeout(1000);
console.log("第三层异步结束！")
await timeout(1000);
console.log("第四层异步结束！")
await timeout(1000);
console.log("第五层异步结束！")
return "all finish";
}
asyncTimeSys().then((value) => {
console.log(value);
});
</script>
</head>
<body>
</body>
</html>
好，我们不整没用的我们看看实际项目里面怎么搞的，还是拿网易云举例：
ok，感觉天都亮了。
完全靠我讲大家体会不深，还是希望大家能够真的自己认真练习，把这个项目做出来，而不是变成听听而已。
Java高架构师、分布式架构、高可扩展、高性能、高并发、性能优化、Spring boot、Redis、ActiveMQ、Nginx、Mycat、Netty、Jvm大型分布式项目实战学习架构师视频免费学习加群：835638062 点击链接加入群聊【Java高级架构】：https://jq.qq.com/?_wv=1027&k=5S3kL3v
网友评论