Понимает ли js, что функция вернет promise?

Question

[Zashamee]

Есть такая функция…

const getData = () => {
  fetch(“адресДаты”).then((resp) => {
 resp.json()
})
.then((data) => {
 return data.data
})
}

В общем узнал, что js однопоточный и есть такая шиука как event loop. И собственно возник вопрос. Как в js будет обрабатываться данная функция - по порядку и пока движок не выполнит запрос (а он может занять некоторое время), после чего перейдет к другой функции? Или поймет что это асинхрон и будет выполнять ее в процессе?
Или я вообще не правильно понимаю как это работает js?)

Answer 1

[paroletatel]

Отвечу так, как сам понимаю, без претензий на экспертство.

Сама функция в вашем примере — синхронная. Внутри данной функции вызывается fetch — он асинхронный.

Вызов функции и её выполнение — это блокирующий код, он выполняется синхронно, и останавливает поток, пока не отработает функция.

Но суть в том, что идея отрабатывания данной синхронной функции в том, чтобы поместить в event loop асинхронный запрос (который возвращает promise), обработчик которого запускается и не блокирует основной поток, — и только. Сама функция же, как синхронная, возвращает то, что вы ей даете вернуть, — в данном случае undefined.

Если бы вы записали функцию, как асинхронную, и перед fetch использовали await, то данная функция как раз и возвращала promise, который предполагал бы полное исполнение fetch до выполнения самой функции, то есть resolve'а promise функции.

const getData = async () => {
  await fetch('адресДаты').then((resp) => {
    resp.json()
  })
  .then((data) => {
    return data.data
  })
}

Comments

[sudo rm -rf /]

Почему undefined? Функция fetch помечена как асинхронная, поэтому возвращает promise. А promise - обычный объект, который возвращается из функции.

[paroletatel]

sudo rm -rf /, Потому что в функции getData отсутствует ключевое слово return.

Функция будет работать так, как вы подразумеваете, в случае, который описал в своём ответе Сергей delphinpro , когда мы как раз явным образом возвращаем promise от fetch

[sudo rm -rf /]

paroletatel, действительно. Странный пример

[Zashamee]

sudo rm -rf /, пример то странный, просто я хотел разобраться в том как работает эвет луп. В итоге как я понял: сначало сработает вызов функции(по сути макротаска), потом fetch(он же промис, он же очередь микротасок), если имеются then, catch finally, они будут помещены в очередь макротасок.
Или же я не прав и сначала в очередь попадут ф-и высшего порядка. А после них в очередь встают внутренние ?

[paroletatel]

Event loop в JavaScript отвечает за управление выполнением асинхронного кода. Он работает внутри JavaScript-движка и позволяет выполнять операции в неблокирующем режиме, чтобы не останавливать выполнение программы.

Когда вызывается функция `getData()`, она запускает асинхронную операцию - запрос к серверу с помощью `fetch()`. Этот запрос возвращает промис, который будет разрешен после получения ответа от сервера.

Когда промис разрешается, он приводит к выполнению колбэк-функции, переданной в метод `then()`. В данном случае, колбэк получает ответ от сервера (`resp`) и вызывает метод `json()`, который также возвращает промис.

Когда второй промис разрешается, он снова вызывает колбэк-функцию, которая получает данные (`data`) и возвращает их.

Однако, в данном примере функция `getData()` не возвращает данные наружу, потому что этот `return` находится внутри колбэк-функции, а не внутри `getData()`. Вместо этого, функция `getData()` возвращает `undefined`.

Чтобы получить данные из функции, можно использовать `async/await` или вернуть промис из `getData()`:

```javascript
const getData = () => {
return fetch("адресДаты")
.then((resp) => {
return resp.json();
})
.then((data) => {
return data.data;
});
}

getData().then((data) => {
console.log(data);
});
```

В этом случае, функция `getData()` возвращает промис, который можно разрешить, используя метод `then()`, и получить данные в колбэк-функции, переданной этому методу.

Это ответ gpt-3.5-turbo

Суть:
event loop нужен как раз для стимуляции многопоточности в одном потоке. Это глубокое понимание движка (почитайте про v8).
Event loop используется для асинхронности.
Я бы на вашем месте использовал иные абстракции и не думал бы про очередь задач, потоки и тд.

Есть синхронный вызов
Есть асинхронный вызов

Синхронный подразумевает полное исполнение кода до перехода к следующему коду.

Асинхронный — возвращение promise, и появление параллельного синхронному коду исполнение асинхронного кода, внутри которого так же могут быть синхронные и асинхронные методы и так далее рекурсивно.

await позволяет асинхронный код исполнять синхронно, то есть ждать, пока зарезолвится promise.

Каждый раз, когда мы в синхронном по умолчанию коде вызываем асинхронный, появляется параллельное исполнение этого асинхронного кода. Синхронный получает promise и идёт дальше. Асинхронный вызывается по факту.
then, catch и другие callback функции вызываются асинхронно по очереди, ожидая исполнения предыдущей части.

Answer 2

[historydev]

fetch встанет в очередь макро задач после вызова функции, then в очередь микро задач после того, как будет получен ответ в fetch.

Answer 3

[Сергей delphinpro]

верните сам промис

const getData = () => {
  return fetch('адресДаты').then((resp) => {
    resp.json()
  })
  .then((data) => {
    return data.data
  })
}

getData.then(d => console.log(d));