33 views

网易云 async&await 实现版 全文版

By | 2019年8月3日

我们的网易云音乐系列到此结束。今天我们将重点讨论ES7异步和获取异步编程最重要的事情之一。

ES7异步/等待被称为异步编程的最终解决方案。让我们首先总结一下这个术语,并分享异步编程是如何产生的,以及如何在过去五次中解决它。

第一次,我们学习了剪切图表和动态计算响应的REM布局,第二次,我们学习了如何使用本地JS来学习旋转图表,第三次,我们共享了H5音频,这导致了第四个异步请求歌词Ajax和第五个fetch+proMise解决方案。

每一种方案都不完美,我们通过代码来说明。
<!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执行,但有时它必须使用数据,所以只能嵌套。但是,更多的嵌套将导致以下问题。这个案子来自旧金山的朋友。非常感谢。

<!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>
承诺变成了链式,但还不够完美。重点是,今天的知识如何使用Async和Wait的ES7让我们在编写普通代码时编写异步代码?

你看,这是正确的和容易写的,只需添加两个单词,完整的代码

<!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>
我们不整无用的。让我们看看实际的项目,或者以网易为例:

好吧,感觉天都亮了。

简单地说,通过这一系列的课程,您已经完全了解了项目的总体开发过程,而且还了解了一些容易出错的方面,重点是涵盖ES6和ES7的新知识。

当然,根据我说的,你没有深刻的理解。我希望你能亲自实践这个项目,而不是把它变成倾听。

本系列教程就到这,欢迎有问题想交流的同学,或者有专门技能提升需求的同学,到留言区里互相交流。

 

本文编辑于2019年08月3日,属于云漫网络原创内容,由特约作者(网站防护技术员)首发在win-man.com,云漫网络每日更新发布行业原创内容,转载请注明出处。否则属侵权行为一定追究责任。

作者:云漫网络编程工程师
本文转载于:http://win-man.com
本文关键词:PHP  python

发表评论

电子邮件地址不会被公开。 必填项已用*标注