網易雲音樂數據交互—async&await實現版（終結篇）

時間 2019-12-28

標籤網易音樂數據交互 async&await async await 實現終結欄目 Java 简体版

原文原文鏈接

咱們的網易雲音樂系列課，尾聲了，今天咱們要將一個最重要的東西--關於ES7 async結合Fetch異步編程問題。html

ES7 async/await被稱做異步編程的終極解決方案，咱們先無論這個稱呼，我們先總結一下，過去5次分享咱們一路走來異步編程是如何產生，到最後如何解決的。ajax

第一次分享咱們學會了切圖和動態計算響應式rem佈局，第二次分享咱們體會了如何學習使用原生js進行學習輪播圖，第三次分享了H5 audio這塊，進而引出了第四次的異步請求歌詞ajax和第五次的Fetch+promise解決方案。編程

可是每一種方案都不完美，咱們經過代碼來講明。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>

我特地寫了一個程序，這下你們就能體會他的缺陷。async

那咱們怎麼解決呢？異步編程

<!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>

好，咱們不整沒用的咱們看看實際項目裏面怎麼搞的，仍是拿網易雲舉例：學習