Как получить результат работы асинхронной функции?

Question

[WStanley]

Всем привет!
Мне надо файл отправить на сервер, у меня есть только url на файл
На просторах великого нарыл код он работает:

function getFileFromUrl(url='') {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = (e) => {
        let reader = new FileReader();
        reader.readAsDataURL(xhr.response);
        reader.onload = (e) => {
            console.log(e.target.result)
        };
    };
    xhr.send();
}

Вопрос: как мне вернуть с функции e.target.result? Чую, что надо async шайтанить, а как, знаний не хватает.
Пожалуйста можно с объяснением, спасибо!

Comments

[Алексей Уколов]

Вообще, качать файл на клиент, чтобы потом отправить его на сервер - это несколько странно. Не проще ли отправлять на сервер саму ссылку, а там уже качать?

[WStanley]

Алексей Уколов, действительно!

[WStanley]

Алексей Уколов, на сервере мне функция возвращает, что передан не валидный файл, поэтому я заморочился. Обыграю вариант с отправкой ссылки, спасибо за замечание!

Answer 1

[historydev]

async function getFileFromUrl(url='') {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    let response = xhr.onload = (e) => {
        let reader = new FileReader();
        reader.readAsDataURL(xhr.response);
        return reader.onload = (e) => {
            return e.target.result
        };
    };

    await xhr.send();

   return await response

}

Comments

[WStanley]

Да, работает, спасибо!
Как понять куда писать await?

[historydev]

WStanley, await аналог setTimeout если вам нужно подождать завершения вычислений переменной и ответ от сервера, пишите await, но тут дело не в await скорее всего, попробуйте убрать, дело в return.

let response = xhr.onload = (e) => { /* <==== Теперь e.target.result результат вот этой функции, а его мы записываем в response и возвращаем уже его в конечном результате */
        let reader = new FileReader();
        reader.readAsDataURL(xhr.response);
        /* Теперь он результат этой функции и мы возвращаем его ещё раз r.target.result ====> */ return reader.onload = (e) => {
             /* Возвращаем r.target.result ====> */  return e.target.result
        };
    };

[historydev]

Pardon Me! Where Do I Find 4giveness?, это то как я это вижу, как мне объяснять в подобных ситуациях? Цитата из learn.js:

Ключевое слово await заставит интерпретатор JavaScript ждать до тех пор, пока промис справа от await не выполнится.

[historydev]

Pardon Me! Where Do I Find 4giveness?, он ждёт завершения операции, а таймаут ждёт указанный промежуток времени