async await

我們直接進入主題！！！

1.async和await是什麼？

        async:
            是ES7語法，用於宣告一個function是非同步函式。
        await:
            等待一個非同步方法完成。
    ps:await只能出現在async函式中，不然會報錯，如示例1-1;
        Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
        Await只在非同步函式和頂級模組體中有效.

 1 /*示例 1-1*/
 2     let fun = function (){
 3         console.log('錯誤示例');
 4     }
 5     await fun();
 6 
 7     let fun1 = function(){
 8         console.log('正確示例');
 9     }
10     let fun =async function (){
11         await fun1();
12     }
13     fun();

2.async到底幹了什麼？
       (一):
        我們先看一下async宣告的函式，返回值到底是個什麼。
    ps:
 
如示例2-1;
        可以看到返回的其實就是一個promise物件。Promise{<fulfilled>: "async"}
        所以，async直接返回一個promise物件。如果在函式中直接return一個直接量，async會通過promise.resolve()封裝成promise物件。
    ps:Promise.resolve(e)可以看作是 new Promise(resolve => resplve(e))的簡寫，可以快速將字面量物件或其他物件分裝成promise例項。
        (二):
        使用async不用await可以處理返回值嗎？
    ps:
 
如示例2-2-1;
        如示例2-2-2，async宣告的函式是一個promise物件，所以我們當然可以用then()鏈去處理。
        (三):
        到這裡就會產生一個疑問，既然async返回是一個promise物件，並且promise的特點就是無等待，在沒有await的情況下會立即執行，不會阻塞後面的語句，和普通的promise並無二致，
        我們為什麼要用async和await呢？

        我們看示例2-3-1，模擬了一個非同步操作，因為promise並不會造成阻塞，所以列印2輸出為null，列印1會在一秒以後輸出111，
        想一個問題如果我們有的程式碼是基於非同步完成之後的結果，要怎麼處理？對，我們可以在then()函式中寫，如果有多個promise並且相互依賴呢？

 1     /*示例2-1*/
 2 
 3     let fun = async function(){
 4         return 'async';
 5     }
 6     console.log(fun());//Promise{<fulfilled>: "async"}
 7 
 8     /*示例2-2-1*/
 9     fun().then(e=>{
10         console.log(e);//async
11     })
12 
13     /*示例2-3-1*/
14     var param = null;
15 
16     let fun =  () => {
17         return new Promise(resolve => {
18             setTimeout(() => resolve(function(){
19                 param = '111';
20             }), 1000);
21         });
22     }
23 
24     fun().then(v => {
25         v();
26         console.log(param,'1');
27     });
28     console.log(param,'2');

3.await到底在等什麼？
        (一):
        官方介紹，await等待的是一個promise物件或者是其它值。
        實際await等待的是一個返回值，所以await後邊可以接普通函式，或者是直接量。
    ps:如示例3-1-1。
        (二):
        await等到了要等的東西，然後呢？
        await是一個運算子，用於組成表示式，await表示式的運算結果取決於等到的東西。
        如果await等到的不是一個promise物件，那await運算結果就是等到的東西。
        如果await等到的是一個promise物件，那會阻塞後面的程式碼，等著promise物件resolve，然後得到resolve的值，最為await運算結果。
        注意：
            阻塞，只是async把所有的阻塞都封裝在一個promise物件中非同步執行，這也是await必須使用在async函式中的原因。
    ps:如示例3-2-1。
        示例會先執行列印3 輸出null,然後一秒以後非同步結束執行1，2。

 1     /*示例3-1-1*/
 2     let fun = function () {
 3         return "fun";
 4     }
 5 
 6     let asyncFun = async function () {
 7         return Promise.resolve("asyncFun");
 8     }
 9 
10     async function test() {
11         const v1 = await fun();
12         const v2 = await asyncFun();
13         console.log(v1, v2);
14     }
15 
16     test();
17     /*示例3-2-1*/
18     var param = null;
19 
20     let fun = () => {
21         return new Promise(resolve => {
22             setTimeout(() => resolve(function () {
23                 param = '111';
24             }), 1000);
25         });
26     }
27 
28     let awaitFun = async function () {
29         await fun().then(v => {
30             v();
31             console.log(param, '1');
32         });
33         console.log(param, '2');
34     }
35     awaitFun();
36     console.log(param, '3');

4.目前看來使用Promise和async，await好像並沒有什麼區別？
        (一):
        我們簡單做一個比較。
        不用async/await:
    ps:示例4-1-1。
        使用async/await:
    ps:示例4-1-2。
        好，我們發現好像並沒有什麼區別？so，優勢到底在哪裡？
        (二):
        async/await優勢：
        其實單一的promise並不能發現async/await優勢，但是如果處理多個優勢就出來了。
        說白了async/await好像就是用來優化promise。
        現在，我們假設一個業務，分成多步，且每一步都依賴於上一步的結果。
    ps:示例4-2-1。
        有沒有發現什麼？？？
        在看一個，把業務要求改一下，仍然是三個步驟，但每一個步驟都需要之前每個步驟的結果。
    ps:示例4-2-2。
        哇，是不是很神奇！！！

  1     /*示例4-1-1*/
  2     let fun = function () {
  3         return new Promise(resolve => {
  4             setTimeout(() => resolve("not async/await!!!"), 1000);
  5         });
  6     }
  7 
  8     fun().then(v => {
  9         console.log("async", v);
 10     });
 11     /*示例4-1-2*/
 12     let fun = function () {
 13         return new Promise(resolve => {
 14             setTimeout(() => resolve("is async/await!!!"), 1000);
 15         });
 16     }
 17 
 18     async function test() {
 19         const v = await fun();
 20         console.log(v);
 21     }
 22 
 23     test();
 24 
 25     /*示例4-2-1*/
 26     /**
 27      * 傳入引數 n，表示這個函式執行的時間（毫秒）
 28      * 執行的結果是 n + 200，這個值將用於下一步驟
 29      */
 30     function getTime(n) {
 31         return new Promise(resolve => {
 32             setTimeout(() => resolve(n + 200), n);
 33         });
 34     }
 35 
 36     function step1(n) {
 37         console.log(`step1 with ${n}`);
 38         return getTime(n);
 39     }
 40 
 41     function step2(n) {
 42         console.log(`step2 with ${n}`);
 43         return getTime(n);
 44     }
 45 
 46     function step3(n) {
 47         console.log(`step3 with ${n}`);
 48         return getTime(n);
 49     }
 50     /*promise實現*/
 51     function doIt() {
 52         console.time("doIt");
 53         const time1 = 300;
 54         step1(time1)
 55             .then(time2 => step2(time2))
 56             .then(time3 => step3(time3))
 57             .then(result => {
 58                 console.log(`result is ${result}`);
 59                 console.timeEnd("doIt");
 60             });
 61     }
 62 
 63     doIt();
 64     /*async/await實現*/
 65     async function doIt() {
 66         console.time("doIt");
 67         const time1 = 300;
 68         const time2 = await step1(time1);
 69         const time3 = await step2(time2);
 70         const result = await step3(time3);
 71         console.log(`result is ${result}`);
 72         console.timeEnd("doIt");
 73     }
 74 
 75     doIt();
 76 
 77     /*4-2-2*/
 78     function step1(n) {
 79         console.log(`step1 with ${n}`);
 80         return getTime(n);
 81     }
 82 
 83     function step2(m, n) {
 84         console.log(`step2 with ${m} and ${n}`);
 85         return getTime(m + n);
 86     }
 87 
 88     function step3(k, m, n) {
 89         console.log(`step3 with ${k}, ${m} and ${n}`);
 90         return getTime(k + m + n);
 91     }
 92     /*async/await實現*/
 93     async function doIt() {
 94         console.time("doIt");
 95         const time1 = 300;
 96         const time2 = await step1(time1);
 97         const time3 = await step2(time1, time2);
 98         const result = await step3(time1, time2, time3);
 99         console.log(`result is ${result}`);
100         console.timeEnd("doIt");
101     }
102 
103     doIt();
104 
105     /*promise實現*/
106     function doIt() {
107         console.time("doIt");
108         const time1 = 300;
109         step1(time1)
110             .then(time2 => {
111                 return step2(time1, time2)
112                     .then(time3 => [time1, time2, time3]);
113             })
114             .then(times => {
115                 const [time1, time2, time3] = times;
116                 return step3(time1, time2, time3);
117             })
118             .then(result => {
119                 console.log(`result is ${result}`);
120                 console.timeEnd("doIt");
121             });
122     }
123 
124     doIt();

5.總結
        個人理解async/await是用來解決同步非同步，更重要的是優化了promise。

ok，到此結束，後續會把實際應用場景更新進來，歡迎指出毛病哦！