Правильно ли я понимаю асинхронные сетевые запросы?

Question

[Alex]

const promise = getResource() // Обращение к серверу которое занимает ровно одну секунду

// Синхронные операции на выполнение которых уходит ровно одна секунда

await promise // На данный момент сетевой запрос уже выполнен, И просто ожидает пока я его "запрошу"?

Comments

[Leo Developer]

async/await работают только с промисами. Соответственно await берет значение из первого аргумента метода then.
Если это запрос с использованием fetch, то

async function someRequest () {
try {
 const response = await fetch("/some-endpoint") // Тут успешный ответ от сервера
} catch (error) {
 // Тут ответ с ошибкой от сервера или любая другая
}
}

[Антон Швец]

Leo Developer, await работает со всем, у кого есть метод then.
Первый (и второй) аргумент then это коллбэк

[alex]

как бэ код выше вообще не валидный, ибо await работает только в паре с async. синтаксическая ошибка. ну а так да, то что вы написали впринципе верно

[DanKud]

Да, все правильно понимаете. Промис будет запущен сразу же и получит статус fulfilled после выполнения. Затем при запросе await соответственно имея статус fulfilled никакого ожидания уже не будет.
В принципе это легко проверяется:

(async () => {
    const promise = new Promise(resolve => {
        setTimeout(() => {
            return resolve('done');
        }, 1000);
    });
    console.log(promise); // выведет state: pending
    setTimeout(() => {
        console.log(promise); // выведет state: fulfilled
    }, 1100);
})()

[Alex]

DanKud, Спасибо. Об этом я и спрашивал

Answer 1

[Роман]

Нет, не совсем так.

// getResource() это должна быть некая функчия, которая делает асинхронный запрос к серверу и возвращает thenable объект:
// раз - https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve
// два - https://ru.stackoverflow.com/questions/877248/%D0%A7%D1%82%D0%BE-%D1%82%D0%B0%D0%BA%D0%BE%D0%B5-thenable-%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82


// тут мы запрашиваем обращаемся к серверу, при этом запрос может быть выполнен как очень быстро так и очень медленно а так же он может быть вообще не выполнен (зависит от загруженности сети, состояния и загруженности сервера)
const promise = getResource()

// тут мы конечно можем делать синхронные операции,но так как они синхронные,  то пока они не отработают выполнение кода дальше не двинется.

// тут мы просто говорим, что ждем пока сделанный запрос на сервер не вернет данные  код, находящийся далее не исполнять. Начнет его исполнять только после получения данных, сколько бы запрос к серверу не длился (в разумных пределах конечно. Существуют различные таймауты на установку соединения, на ожидание ответа и т.д.). При этом пока исполнение кода в данном блоке находится как бы на паузе, интерпретатор может выполнять другие задачи имеющиеся в eventloop. Таким образом достигается стиль написания кода, похожий на синхронный но являющийся асинхронным.
await promise

Comments

[DanKud]

тут мы конечно можем делать синхронные операции,но так как они синхронные, то пока они не отработают выполнение кода дальше не двинется.

Не совсем понятно, что вы тут имели ввиду. Почему "код дальше не двинется"? Любые операции до моменты объявления ожидания промиса будут выполнены асинхронно независимо от него.

[Роман]

DanKud, чуть позже кину пример того что имею ввиду. Сейчас с телефона, codepen и jsfidlle неудобно пользоваться.

[Роман]

DanKud, вот пример того что я имел ввиду:

вывод в консоль

стартуем
запросили данные у getResource. прошло 4 мс
синхронный код завершился. прошло 2000 мс
сработал setTimeout. прошло 2053 мс
дождались данных от getResource any data . прошло 2054 мс

Конечно пример с while это очень грубо, но любой СИНХРОННЫЙ запрос (к удаленному серверу, файлу и т.д.) а так же любые синхронные вычисления, длящиеся более секунды дадут тот же результат (на строчку await promise мы попадем не ранее чем эти запросы/вычисления закончатся)

[Роман]

DanKud, возможно я неверно трактую вопрос автора.

мое видение вопроса:

const promise = getResource() // Обращение к серверу которое занимает ровно одну секунду

// Синхронные операции на выполнение которых уходит ровно одна секунда
// я понял так: что бы тут не происходило, ровно через секунду оно будет прервано

await promise // На данный момент сетевой запрос уже выполнен, И просто ожидает пока я его "запрошу"?
// я понял так: в обязательном порядке кинет сюда

возможно автор имел ввиду именно то что написал:)

const promise = getResource() // Обращение к серверу которое занимает ровно одну секунду
// ** каким то образом ограничивает время ожидания ответа фиксированной одной секундой

// Синхронные операции на выполнение которых уходит ровно одна секунда
// ** обеспечивает временные рамки выполнения синхронного кода ровно одной секундой

await promise // На данный момент сетевой запрос уже выполнен, И просто ожидает пока я его "запрошу"?

если автор имел ввиду именно это, то да, он все верно понял а я не прав.

[DanKud]

Роман, да, возможно это я не внимательно прочитал закомментированный автором текст в вопросе. Если у него там какие-то синхронные операции, то конечно они будут задерживать дальнейшее выполнение кода. Но его в принципе интересовало только будет ли уже готов промис, выполняющийся одну секунду, через одну секунду после его объявления, до того как он запросит его результат. Там уже в принципе роли не играет какой код будет в промежутке между объявлением промиса и запросом его результата, хоть синхронный, хоть асинхронный :)

[Alex]

Роман, DanKud, Суть моего вопроса — могу ли я запустить отправку сетевого запроса и в то время пока браузер его отправляет и дожидается ответа выполнить какието лакальные операции. Чтобы это выполнялось так сказать парралельно. В том смысле отправляет ли браузер запрос когда я создаю промис, или когда дожидаюсь его? Или есть какие-то неочевидное поведение в стиле "Если промис создан, но команда на его "ожидание" отложена, то браузер может отправить сам запрос не мнгновенно а попозже в зависимости от каких-то факторов"

[Роман]

DanKud, с одной стороны да, но пока выполняется синхронный код, никакой другой код параллельно выполняться не будет (разве что только в воркерах). При этом с асинхронными получалками данных тоже не все так просто, тут уже неоднократно спрашивалось/обсуждалось работают ли всякие fetch и xmlrequest в параллельном потоке или нет, было высказанно мнение что вроде да, в параллельном, но достоверной информации никто не давал. Если они пашут в параллельном потоке, то все будет выполнятся так как вы и написали, если не в параллельном, то будет ждать окна в евентлупе, которое в рассмотренном примере наступит не ранее чем завершиться блок синхронных операций/вычислений. Кроме того, если getResource() не более чем какаято вычислялка, работающая для достижения асинхронности через setTimeout или setImmediate, то в вышеприведенном примере она даже не начнет выполняться пока не закончится обработка следом идущего блока синхронного кода.

[Robur]

Alex, да, можете.

браузер отправляет запрос тогда когда ему говорят отправить запрос, а то что вы из этого как-то берете промис и что-то с ним делаете потом - ваше дело. Можете начать ждать его сразу (и в это время можно тоже что-то еще делать "параллельно") можете что-то поделать и ждать его потом, а можете вообще проигнорировать. Запрос в этот момент уже выполняется.

[Роман]

Alex,

могу ли я запустить отправку сетевого запроса и в то время пока браузер его отправляет и дожидается ответа выполнить какието лакальные операции.

да.

В том смысле отправляет ли браузер запрос когда я создаю промис,

да

Или есть какие-то неочевидное поведение

да. Браузер отправит запрос и получит данные параллельно, но вернется к месту где эти данные ожидаются (await promise) не моментально, по получению данных а после того как обработает текущий пул задач в eventloop (это достаточно неточное объяснение, так как ожидание результата промиса также находится в виде задачи в пуле, но для общего понимания подойдет)