處理多個REST API調用以快速檢索JavaScript中的大量數據的最佳方法是什么？

Question

我有兩個要調用的API網址，第一個是https://jsonplaceholder.typicode.com/todos。我需要獲取第一個網址來檢索ID 。 檢索后，調用第二個URL，即https://jsonplaceholder.typicode.com/todos/(id） 。 我正在為這種方法使用基於承諾的方法，但是我的問題是。

在快速檢索大量數據時如何實現？

注意：我僅將普通JavaScript和CDN用於axios。

export const getData = () => {

    const API = `https://jsonplaceholder.typicode.com/todos`;

    return axios.get(API, {
        headers: {
            "accept": "application/json;odata=verbose"
        }
    }).then(res => {
         const data = [];

          const requests = res.map(val => {
            const id = val.id;
            var obj = {};

            const url = `https://jsonplaceholder.typicode.com/todos/(id)`;
            return axios.get(url).then(res => {

                obj['Result'] = res;

            });
        });
            return Promise.all(requests).then(() => {
            return data;
        });
    });
}

這段代碼可以正常工作，但是獲取數據的速度很慢，我需要一些有關最佳概念的建議。

Answer 1

最快的方法是不從Web瀏覽器執行所有AJAX調用。

Web瀏覽器將並發請求的數量限制在6到10個左右 （來自本文 ），因此，如果您可以在200ms內執行請求並獲得響應，則您仍在等待一整分鍾的客戶端請求。

相反，如果您構建了一個服務器端解決方案來聚合數據，則可以查詢自定義終結點以一次檢索更大的數據塊。

如果這不是您的選擇，那么無論哪種方式，瀏覽器請求限制都可能是您的瓶頸。