12、Generator及其非同步方面的應用

Slueia發表於2020-11-29

基本概念:
Generator函式是ES6提供的一種非同步程式設計解決方案,語法行為與傳統函式完全不同。Generator函式有多種理解角度。語法上,首先可以把它理解成,Generator函式是一個狀態機,封裝了多個內部狀態。
執行Generator函式會返回一個遍歷器物件,也就是說,Generator函式除了狀態機,還是一個遍歷器物件生成函式。返回的遍歷器物件,可以依次遍歷Generator函式內部的每一個狀態。
形式上,Generator函式是一個普通函式,但是有兩個特徵。一是,function關鍵字與函式名之間有一個星號;二是,函式體內部使用yield表示式,定義不同的內部狀態(yield在英語裡的意思就是產出)。

一個應用例項:
傳送ajax請求獲取新聞內容
新聞內容獲取成功後再次傳送請求,獲取對應的新聞評論內容
新聞內容獲取失敗則不需要再次傳送請求。

function* sendXml() {
      // url為next傳參進來的資料
     let url = yield getNews('http://localhost:3000/news?newsId=2');//獲取新聞內容
      yield getNews(url);//獲取對應的新聞評論內容,只有先獲取新聞的資料拼湊成url,才能向後臺請求
    }
    function getNews(url) {
      $.get(url, function (data) {
        console.log(data);
        let commentsUrl = data.commentsUrl;
        let url = 'http://localhost:3000' + commentsUrl;
        // 當獲取新聞內容成功,傳送請求獲取對應的評論內容
        // 呼叫next傳參會作為上次暫停是yield的返回值
        sx.next(url);
      })
    }
    let sx = sendXml();// 傳送請求獲取新聞內容
    sx.next();

相關文章