Javascript: Why does async/await is not working in this case while setTimeout works just fine?

Question

I'm solving a particular problem at work where I'm supposed to call 3 methods from the backend when a button pressed. Initially I have set up this with async/await and it was working just fine locally within the servers of our company.

Here's the original code:

async function attachDocumentsToForm(file: any, signature: any) {
    let pdfFile = new File([file], `Подписанный_Файл_${formData?.serialNumber}.pdf`, {type:"text/plain"})
    let sigFile = new File([signature], `Подпись_${formData?.serialNumber}.sig`)

    await AttachmentApiClient.attach(
        inquiryId,
        `Подпись_${formData?.serialNumber}.sig`,
        "Прочие документы",
        {
            data: sigFile,
            fileName: `Подпись_${formData?.serialNumber}.sig`
    });

    await AttachmentApiClient.attach(
        inquiryId,
        `Подписанный_Файл_${formData?.serialNumber}.pdf`,
        "Прочие документы",
        {
            data: pdfFile,
            fileName: `Подписанный_Файл_${formData?.serialNumber}.pdf`
    });
    
    await EmployeeApiClient.signInquiry(inquiryId, new SignChiefVm({ isSigned: true, comment: commentText }))

    setOpenedSnackbar(true)
    setIsSigned(true)
}

However when the app got deployed to the servers of our client the attach method that supposed to be attaching pdf file the request is failing (it seems that the frontend immediately fails to attach pdf file, meanwhile .sig attach method works just fine no matter in which order I call each of them). As a workaround I used setTimeout with 2s and 2.5s intervals between each method and it worked.

Here is a new code:

function attachDocumentsToForm(file: any, signature: any) {
    let pdfFile = new File([file], `Подписанный_Файл_${formData?.serialNumber}.pdf`)
    let sigFile = new File([signature], `Подпись_${formData?.serialNumber}.sig`)

    AttachmentApiClient.attach(
        inquiryId,
        `Подписанный_Файл_${formData?.serialNumber}.pdf`,
        "Прочие документы",
        {
            data: pdfFile,
            fileName: `Подписанный_Файл_${formData?.serialNumber}.pdf`
    });

    setTimeout(() => {
        AttachmentApiClient.attach(
            inquiryId,
            `Подпись_${formData?.serialNumber}.sig`,
            "Прочие документы",
            {
                data: sigFile,
                fileName: `Подпись_${formData?.serialNumber}.sig`
        });
    }, 2500)
    
    setTimeout(() => {
        EmployeeApiClient.signInquiry(inquiryId, new SignChiefVm({ isSigned: true, comment: commentText }))

        setOpenedSnackbar(true)
        setIsSigned(true)
    }, 4500)
}

I've tested it several times and it works without any issue but it seems to me that such solution is quite bad. What could be a possible reason why async/await is not working in this case and what could be a possible solution without setting up time for each request directly?

Best regards, Konstantin

P.S: Tech Stack at frontend - React & Typescript

@VLAZ no, it seems to fail immediately without trying to send anything to the backend even — Konstantink1, Jan 29 '21 at 11:52
What kind of errors are you getting? Syntax errors or errors from the server while uploading? — adiga, Jan 29 '21 at 11:53
The `setTimeout` approach does *not* work if `attach` takes longer than 2s. And there's no error handling whatsoever. — Bergi, Jan 29 '21 at 11:53
Then the `await` is worthless. You can only `await` promises, not arbitrary method executions. If it's not properly asynchronous, then [perhaps it can be promisified](https://stackoverflow.com/questions/22519784/how-do-i-convert-an-existing-callback-api-to-promises) — VLAZ, Jan 29 '21 at 11:53

Javascript: Why does async/await is not working in this case while setTimeout works just fine?

0 Answers0