異步迭代器在營業中的實踐

2019年8月24日 161次阅读 来源: LeuisKen

議論還請到原 github issue 下：
https://github.com/LeuisKen/l…

什麼是異步迭代器

關注tc39或許經由過程其他渠道關注JavaScript生長的同硯應當早已注重到了一個新的草案：proposal-async-iteration。該草案在本文成文時，已進入了ECMAScript® 2019範例，也就是說，成為了JavaScript言語自身的一部分。這項草案就是我本文中，我將要提到的異步迭代器(Asynchronous Iterators)。

這個新的語法，為之前的生成器函數(generator function)供應了異步的才能。舉個例子，就是下面如許。

// 之前的生成器函數
function* sampleGenerator(array) {
    for (let i = 0; i < array.length; i++) {
        yield array[i];
    }
}

// 如今的異步生成器函數，讓我們能夠在生成器函數前面加上 async 關鍵字
async function* sampleAsyncGenerator(getItemByPageNumber, totalPages) {
    for (let i = 0; i < totalPages; i++) {
        // 如許我們就可以在內里運用 await 了
        yield await getItemByPageNumber(i);
    }
}

營業場景

我們進修新的東西，必定是要伴隨着營業代價的。因而我去進修異步迭代器，天然也是為了處置懲罰我在營業中所碰到的題目。接下來我來分享一個場景：

在挪動端，常常會有滑到頁面底部，加載更多的場景。比方，我們在閱讀消息的時刻，挑選一個分類，就可以看到對應分類的許多消息，這些消息一般是新的在前，舊的在後，遞次的分列下來。比方，百度消息：https://news.baidu.com/news#/

本質上，這是一個分頁器。一般的完成是，前端向服務端發送一個帶有指定種別、指定頁碼（或許時候戳）的數據要求，服務端返回一個數據列表，該列表長度一般是牢固的。然後前端在拿到這部分數據后，將數據襯着到視圖上。值得我們注重的是，在這個場景下，由於是用戶滑動到底部，觸發對下一頁的加載，所以是不存在從第一頁跳到第五頁這類跳頁的需求的。

我們或許會用如許的代碼來完成這個需求：

let page = 1;       // 從第一頁最先
let isLastPage = false;

function getPage(type) {
    $.ajax({
        url: '/api/list',
        data: {
            page,
            type
        },
        success(res) {
            isLastPage = res.isLastPage;    // 是不是為末了頁
            // 依據 res 更新視圖
            page++;
        }
    })
}

// 用戶觸發加載的事宜處置懲罰函數
function handleLoadEvent() {
    if (isLastPage) {
        return;
    }
    getPage('引薦');
}

不去管一些其他的完成細節（如，throttle、異步競態），這段代碼雖然不甚文雅，然則充足完成我們的營業需求了。

需求總是會變的

假定不久以後，我們接到了一個新的需求，我們營業中的某兩個（或許三個、四個）種別的列表須要在同一個頁面上展現。也就是說，數據的映照關聯，發作了以下轉變：

《異步迭代器在營業中的實踐》

計劃設想

讓我們先思索一下：怎樣去兼并列表數據，讓我們的列表還能像之前一樣保證有序？為了輕易議論，我在這裏籠統出兩個數據源A、B，他們內里的內容是兩個有序數組，以下所示：

A ---> [1, 3, 5, 7, 9, 11, …]
B ---> [0, 2, 4, 6, 8, …]

那末我們預期的兼并后列表就是：

merged ---> [0, 1, 2, 3, 4, 5, 6, …]

假定我們每次分頁去取數據，預期的數據長度(記為：pickNumber)是3，那末我們在第一次取數據后，回調中預期要求到的值就是[0, 1, 2]。那末假如我們從A中拿3個，B中也拿3個，那末排序后，從排序的效果中取3個，就拿到了我們想要的[0, 1, 2]。要掏出兼并后列表中有序的pickNumber個數據，就先從各個數據源中取pickNumber個數據，然後對效果排序，掏出前pickNumber個數據，這就是我所挑選的保證數據有序的戰略。

這個戰略，在一些極限情況下，比方兼并后列表的前幾頁都是A等等，都是能夠保證遞次的。

完成設想

計劃肯定后，我們來設想下我們要完成的函數，很天然的，我們會想到如許的完成：

/**
 * 從多個 type 列表中獵取數據
 *
 * @param {Array} types 須要兼并的 type 列表
 * @param {Function} sortFn 排序函數
 * @param {number} pickNumber 每頁須要的數據
 * @param {Function} callback 返回頁數據的回調函數
 */
function getListFromMultiTypes(types, sortFn, pickNumber, callback) {

}

如許的完成，做出來實在也是能夠滿足營業需求的，然則他不是我想要的。由於type這個東西和營業耦合的太嚴峻了。固然，我能夠把types改成urls，然則這類水平的籠統，照樣須要我們把$.ajax這個東西內置到我們的函數里，而我想要的僅僅只是一個merge。所以，我們照樣須要去尋求更好的情勢來籠統這個營業。

尋求更好的籠統

下面我把前面的A和B換一種情勢組織起來，假如我們疏忽掉他們實際上是異步的東西的話，實在他們能夠被籠統為二維數組：

// A
[
    [1, 3, 5],
    [7, 9, 11],
    …
]

// B
[
    [0, 2, 4],
    [6, 8, 10],
    …
]

籠統成了二維數組，我們能夠發明只要去迭代A、B，我們就可以夠取得想要的數據了。也就是說，A和B實在就是兩個差別的迭代器。加上異步的話，那末一個分頁的服務端列表數據源，在前端能夠籠統成一個異步的迭代器，如許籠統后，我的需求，就變成了把兩個數組merge一下就ok了~

運用異步生成器函數籠統分頁邏輯

我們能夠用Promise將$.ajax的邏輯封裝一下：

/**
 * 要求數據，返回 Promise
 *
 * @param {string} url 要求的 url
 * @param {Object} data 要求所帶的 query 參數
 * @return {Promise} 用於處置懲罰要求的 Promise 對象
 */
function getData(url, data) {
    return new Promise(function (resolve, reject) {
        $.ajax({
            url,
            type: 'GET',
            data,
            success: resolve
        });
    });
}

如許，一個分頁器的異步生成器函數就可以夠用以下代碼完成：

/**
 * 獵取 github 某堆棧的 issue 列表
 *
 * @param {string} location 堆棧途徑，如：facebook/react
 */
async function* getRepoIssue(location) {
    let page = 1;
    let isLastPage = false;

    while (!isLastPage) {
        let lastRes = await getData(
            '/api/issues',
            {location, page}
        );
        isLastPage = lastRes.length < PAGE_SIZE;
        page++;
        yield lastRes;
    }
}

運用起來能夠說是異常簡樸了：

const list = getRepoIssue('facebook/react');

btn.addEventListener('click', async function () {
    const {value, done} = await list.next();
    if (done) {
        return;
    }
    container.innerHTML += value.reduce((cur, next) =>
        cur + `<li><div>Repo: ${next.repository_url}</div>`
            + `<div>Title: ${next.title}</div>`
            + `<div>Time: ${next.created_at}</div>`, '');
});

再設想

有了異步迭代器的籠統，我們從新來看看我們的設想，置信人人心中都有了答案：

/**
 * 兼并多個異步迭代器，返回一個新的異步迭代器
 * 該迭代器每次返回 pickNumber 個數據
 * 數據根據 sortFn 排序
 *
 * @param {Array} iterators 異步迭代器數組對象
 * @param {Function} sortFn 對要求效果舉行排序的函數
 * @param {number} pickNumber 迭代器每次返回的元素數目
 * @return {Iterator} 兼并后的異步迭代器
 */
export default async function* mixLoader(iterators, sortFn, pickNumber) {

}

完成

mixLoader取意是夾雜的加載器（老實說，並非一個異常適宜的名字），這個函數我做了一版最簡樸的完成，後續 @STLighter 幫我從算法層面上舉行了屢次優化，在此異常感謝~~

結語

  • 還請注重，假如是有跳頁需求的話，就不能這麼封裝了
  • 除了更好的籠統帶來的可讀性，代碼也變得越發輕易測試了
    原文作者：LeuisKen
    原文地址: https://segmentfault.com/a/1190000014506852
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞