网易云音乐数据交互—async&await实现版(完结篇)


我们的网易云音乐系列课,尾声了,今天我们要将一个最重要的东西--关于ES7 async结合Fetch异步编程问题。

ES7 async/await被称作异步编程的终极解决方案,我们先不管这个称呼,咱们先总结一下,过去5次分享我们一路走来异步编程是如何产生,到最后如何解决的。

第一次分享我们学会了切图和动态计算响应式rem布局,第二次分享我们体会了如何学习使用原生js进行学习轮播图,第三次分享了H5 audio这块,进而引出了第四次的异步请求歌词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才往下执行,但是有时候又必须使用数据,所以只能嵌套。但是嵌套多了又会出现下面的问题,案例来自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,感觉天都亮了。

简单吧,通过这个系列课程的学习大家已经完整的了解了一个项目的大体开发过程,同时也了解了一些容易出错的方方面面,重点是涵盖了ES6和ES7的新知识。

当然,完全靠我讲大家体会不深,还是希望大家能够真的自己认真练习,把这个项目做出来,而不是变成听听而已。

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

原文地址:http://blog.51cto.com/13592288/2175937

时间: 2024-10-04 02:16:36

网易云音乐数据交互—async&await实现版(完结篇)的相关文章

实现 60fps 的网易云音乐首页

网易云音乐是一款很优秀的音乐软件,我也是它的忠实用户.最近在研究如何更好的开发TableView,接着我写了一个Model驱动的小框架 - MDTable.为了去验证框架的可用性,我选择了网易云音乐的首页来作为Demo,语言是Swift 3. 本文的内容包括: 实现网易云音乐首页的思路如何建立一个轻量级的UITableViewController(不到100行)性能瓶颈原因以分析及如何优化到接近60fps Note:本文并没有用Reveal去分析网易云音乐iOS客户端的原始UI布局,所以实现方式

网易云音乐Java版爬虫

网易云音乐Java版爬虫 在编写爬虫之前,我们需要对网易云音乐网站网页类型进行分析,确认哪些页面是我们需要的,哪些页面是我们可以忽略的. 进入网易云音乐首页,浏览后发现其大概有这么几种类型的URL: 推荐页面 排行榜列表以及排行榜页面 歌单列表以及歌单页面 主播电台列表以及主播电台页面 歌手列表以及歌手页面 专辑列表(新碟上架)以及专辑页面 歌曲页面 最终需要爬取的数据在歌曲页面中,该页面里包含了歌曲的名称以及歌曲的评论数量. 另外,我们还需要尽可能多的获取歌曲页面,这些信息我们可以从前面6种类

Vue 实现网易云音乐 WebApp

?? 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp,UI 界面参考了安卓版的网易云音乐.flex 布局适配常见移动端. ?? 项目演示地址:移动端音乐 WebApp,或者可以扫描二维码访问: 电脑在 Chrome 调试模式下食用效果更佳,开启调试模式的手机模式后,如果不能滚动,刷新一下页面即可 ?? 源码地址:vue-music-webapp,欢迎 star 和

C# WPF 低仿网易云音乐(PC)歌词控件

原文:C# WPF 低仿网易云音乐(PC)歌词控件 提醒:本篇博客记录了修改的过程,废话比较多,需要项目源码和看演示效果的直接拉到文章最底部~ 网易云音乐获取歌词的api地址 http://music.163.com/api/song/media?id=歌曲ID 填写歌曲的id即可获取到json格式的数据(歌曲ID获取的方法是:点击分享按钮>其他分享>复制链接,就可以在链接中看到了): {"songStatus":0,"lyricVersion":10,

小白学爬虫:网易云音乐歌单(一)

从零开始写爬虫,初学者的速成指南! 介绍 什么是爬虫? 先看看百度百科的定义: 号:923414804群里有志同道合的小伙伴,互帮互助,群里有不错的视频学习教程和PDF! 简单的说网络爬虫(Web crawler)也叫做网络铲(Web scraper).网络蜘蛛(Web spider),其行为一般是先"爬"到对应的网页上,再把需要的信息"铲"下来. 为什么学习爬虫? 看到这里,有人就要问了:google.百度等搜索引擎已经帮我们抓取了互联网上的大部分信息了,为什么还

Python爬一爬网易云音乐

结果 对过程没有兴趣的童鞋直接看这里啦. 评论数大于五万的歌曲排行榜 首先恭喜一下我最喜欢的歌手(之一)周杰伦的<晴天>成为网易云音乐第一首评论数过百万的歌曲! 通过结果发现目前评论数过十万的歌曲正好十首,通过这前十首发现: 薛之谦现在真的很火啦~ 几乎都是男歌手啊,男歌手貌似更受欢迎?(别打我),男歌手中周杰伦.薛之谦.许嵩(这三位我都比较喜欢)几乎占了榜单半壁江山... <Fade>电音强势来袭,很带感哈(搭配炫迈写代码完全停不下来..) 根据结果做了网易云音乐歌单 : 评论数

抓取网易云音乐歌曲热门评论生成词云

前言 抓数据 抓包分析 加密信息处理 抓取热门评论内容 词云 词云运行效果 总结 前言 网易云音乐一直是我向往的"神坛",听音乐看到走心的评论的那一刻,高山流水.于是今天来抓取一下歌曲的热门评论.并做成词云来展示,看看相对于这首歌最让人有感受的评论内容是什么. 做成词云的好处就是直观以及美观, 其他的我也想不出来有什么了. 抓数据 要想做成词云,首先得有数据才行.于是需要一点点的爬虫技巧. 抓包分析 加密信息处理 抓取热门评论内容 抓包分析 使用Chrome控制台.我们可以轻松的找到评

网易云音乐的歌单推荐算法

[转载]原文地址:https://www.zhihu.com/question/26743347 原文: 不是广告党,但我却成为网易云音乐的的重度患者,不管是黑红的用户界面,还是高质量音乐质量都用起来很舒服.我喜欢听歌,几乎每周不低于15小时,但其实听得不是特别多,并没有经常刻意地去搜歌名,所以曲目数量我并不是很在乎.但是比起其它,网音给我推荐的歌单几乎次次惊艳,而且大多都没听过,或者好久以前听过早就忘记了名字,或者之前不知道在哪听过 只是知道其中一部分旋律,根本不知道名字,等等,听起来整个人大

使用webcollector爬虫技术获取网易云音乐全部歌曲

最近在知乎上看到一个话题,说使用爬虫技术获取网易云音乐上的歌曲,甚至还包括付费的歌曲,哥瞬间心动了,这年头,好听的流行音乐或者经典老歌都开始收费了,只能听不能下载,着实很郁闷,现在机会来了,于是开始研究爬虫技术,翻阅各种资料,最终选择网友们一致认为比较好用的webcollector框架来实现. 首先,我们来认识一下webcollector,webcollector是一个无需配置,便于二次开发的爬虫框架,它提供精简的API,只需少量代码即可实现一个功能强大的爬虫,webcollector+hado