原始中的多个获取请求

Posted 2023-02-27

【中文标题】原始中的多个获取请求

【英文标题】：Multiple fetch request in a raw

【发布时间】：2021-08-18 18:24:13

【问题描述】：

对于一个项目，我必须生成一个列出数据库中车辆的 PDF。为此，我使用了 JSPDF 库。

第一步：我从数据库中获取数据（通过 API 上的异步请求）和服务器上存储在数组中的图像。

第二步：我调用了一个用 JSPDF 生成 PDF 的函数。 问题是我需要在调用我的 generatePDF 函数之前检索我的所有数据，否则字段和图像是空的，因为它们尚未从数据库或服务器中检索。

我找到的一个解决方案是使用 setTimeout 函数在每次调用之间设置延迟。但是，这会使代码变得非常缓慢且不灵活，因为您必须根据要检索的数据和图像的数量手动更改超时。此外，无法准确确定检索数据需要多长时间，尤其是因为这可能因网络状态而异，因此您必须留出通常不必要的余量。

另一种解决方案是使用回调或将 fetch / ajax 调用与 .then / .done 调用交织在一起，但这在检索图像时变得非常复杂，因为它们是一个接一个地检索并且有超过一百个其中。

以干净灵活的方式执行此操作的最简单方法是什么？ 感谢您的帮助，很抱歉文字很长，我尽量说清楚:)

【问题讨论】：

您好 Bernard Maxime，我强烈建议您根据您的想法编写一段代码，简短且非常简洁地说明问题。

我真的建议你阅读这个developer.mozilla.org/en-US/docs/Web/javascript/Reference/…。

相关：***.com/questions/14220321/…

(a) 使用基于 promise 的库来获取数据。 (b) 使用异步/等待。 (c) 使用 Promise.all 等待，直到获取所有数据。

【参考方案1】：

要按顺序执行一系列异步操作，您在上一个操作的履行处理程序中启动下一个操作。

async 函数是最简单的方法：

async function buildPDF() 
    const response = await fetch("/path/to/the/data");
    if (!response.ok) 
        throw new Error(`HTTP error $response.status`);
    
    const data = await response.json(); // Or `.text()` or whatever
    const pdf = await createPDF(data);  // Assuming it returns a promise
    // ...

如果您不能在您的环境中使用 async 函数并且不想转译，您可以将您的 fulfillment 处理程序编写为回调：

function buildPDF() 
    return fetch("/path/to/the/data")
    .then(response => 
        if (!response.ok) 
            throw new Error(`HTTP error $response.status`);
        
        return response.json(); // Or `.text()` or whatever
    )
    .then(data => createPDF(data))
    .then(pdf => 
        // ...
    );

请注意，我返回的是链的结果，以便调用者可以处理错误。

【讨论】：

非常感谢，异步看起来是解决我的问题的最佳方式 :)