原始中的多个获取请求

Question

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

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

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

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

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

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

Answer 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 => {
        // ...
    });
}

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