首页 > 解决方案 > 处理多个 REST API 调用以在 JavaScript 中快速检索大量数据的最佳方法是什么?

问题描述

我有两个 API url 来调用第一个是https://jsonplaceholder.typicode.com/todos我需要获取第一个 url 来检索id。检索后,调用第二个 url,即https://jsonplaceholder.typicode.com/todos/(id)。我正在为这种方法使用基于承诺的方法,但我的问题是。

如何在快速检索大量数据时实现这一点?

注意:我只对 axios 使用纯 JavaScript 和 CDN。


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;
        });
    });
}

此代码正在运行,但获取数据的速度很慢,我需要一些关于最佳概念的建议。

标签: javascriptajaxrestpromiseaxios

解决方案


最快的方法是从 Web 浏览器执行所有 AJAX 调用。

Web 浏览器将同时请求的数量限制在 6 到 10 左右(来自这篇文章),因此如果您可以在 200 毫秒内执行请求并获得响应,那么您仍然在查看一整分钟的客户端请求。

相反,如果您构建了一个服务器端解决方案来聚合数据,您可以查询您的自定义端点以一次检索更大的数据块。

如果这不是您的选择,那么无论哪种方式,浏览器请求限制都可能成为您的瓶颈。


推荐阅读