async 和Generator基本用法和概念介紹。基本概念async函數

基本概念

1、 async 表示這是一個async函數，await隻能用在這個函數裡面。

2、await 表示在這裡等待promise傳回結果了，再繼續執行。

3、await 後面跟着的應該是一個promise對象（當然，其他傳回值也沒關系，隻是會立即執行，不過那樣就沒有意義了…）

這裡我們要實作一個暫停功能，輸入N毫秒，則停頓N毫秒後才繼續往下執行。

普通函數

var sleep = function (time) {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    resolve();
                }, time);
            })
        };
        
        var start = function () {
            // 在這裡使用起來就像同步代碼那樣直覺
            console.log('開始');//開始
            sleep(3000);
            console.log('結束');//結束
        };
    
        start();
           

控制台先後列印順序 先列印開始然後列印結束

async

函數

async函數是Generator函數的文法糖，将Generator的星号換成async将yield換成await，async函數比Generator函數更好用

1、自帶執行器，執行起來，跟調用普通函數一樣

2、async和await 語義更清晰，async表示函數裡有異步操作，await 表示緊跟在後面的表達式需要等待結果

3、await後面啥都可以跟，可以是Promise 也可以是對象和原始類型的值（數值、字元串和布爾值，但這時等同于同步操作

點選檢視Generator介紹及用法

var sleep = function (time) {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    // resolve("成功");
                    reject("失敗")
                }, time);
            })
        };
        var start = async function () {
            for (var i = 1; i <= 10; i++) {
                console.log(`目前是第${i}次等待..`);
                await sleep(1000)
                .then((ok)=>{
                    console.log(ok)//成功
                })
                .catch((err)=>{
                    console.log(err)
                })
                console.log(`第${i}此循環完畢`)
            }
        };
        start()
           

控制台執行順序如下圖

可以看出來，每次列印都會停1000毫秒然後再繼續執行，有點類似于Generator函數。

捕捉錯誤

用

try catch

文法捕捉錯誤也可以捕捉到，用

.then()和.catch()

也可以，上面async函數函數中用到了

.then()和.catch()

，下面展示一下用

try catch

捕捉錯誤的代碼。

var sleep = function (time) {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    // 模拟出錯了，傳回 ‘error’
                    resolve("成功")
                    // reject('error');
                }, time);
            })
        };
        
        var start = async function () {
            try {
                console.log('start');
                await sleep(3000); 
                console.log('end');
            } catch (err) {
                console.log(err); 
            }
        };
        start()
           

上述代碼控制台先會列印

async

間隔三秒列印

end

如果将上面地的

resolve("成功")

換成

reject('error');

則會先列印

async

間隔三秒列印

err