原始文件中的多个提取请求

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 函数并且不想转译，您可以将您的实现处理程序编写为回调：

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

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

原始文件中的多个提取请求

Multiple fetch request in a raw

javascript

ajax

asynchronous

fetch

fetch-api