Форум

denis_alekss · #1 (**permalink**) 04.02.2021, 23:37

Пытаюсь запустить пример с сайта javascript.ru
Не работает код в теме sync/await сайта javascript.ru https://learn.javascript.ru/async-await

Вот код:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
async function showAvatar() {

  // запрашиваем JSON с данными пользователя
(async () => {
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();

})();

  // запрашиваем информацию об этом пользователе из github
  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
  let githubUser = await githubResponse.json();

  // отображаем аватар пользователя
  let img = document.createElement('img');
  img.src = githubUser.avatar_url;
  img.className = "promise-avatar-example";
  document.body.append(img);

  // ждём 3 секунды и затем скрываем аватар
  await new Promise((resolve, reject) => setTimeout(resolve, 3000));

  img.remove();

  return githubUser;
}

showAvatar();
    </script>
</body>
</html>

рони · #2 (**permalink**) 05.02.2021, 00:00

denis_alekss,
всё работает

<script>
async function showAvatar() {

    // запрашиваем JSON с данными пользователя
    let response = await fetch('https://learn.javascript.ru/article/promise-chaining/user.json');
    let user = await response.json();

    // запрашиваем информацию об этом пользователе из github
    let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
    let githubUser = await githubResponse.json();

    // отображаем аватар пользователя
    let img = document.createElement('img');
    img.src = githubUser.avatar_url;
    img.className = "promise-avatar-example";
    document.body.append(img);

    // ждём 3 секунды и затем скрываем аватар
    await new Promise((resolve, reject) => setTimeout(resolve, 3000));

    img.remove();

    return githubUser;
}

showAvatar();
    </script>

denis_alekss · #3 (**permalink**) 07.02.2021, 20:33

Как мы можем вызвать функцию r не объявляя ее?
Интересует вторая строка после конст.

const delay = function(ms) {
return new Promise(function (r) { setTimeout((function () { r() } ),ms) } )

Вначале создается анонимная функция с параметром r, а в теле этой анонимной функции вызывается функция r внутри функции setTimeout, , откуда взялся вызов функции r? Я ведь ее не объявлял, у меня только был параметр с именем r в анонимной, функции r нигде не объявлена как функция. Я про этот вызов r() в анонимной функции.

<script>
const delay = function(ms) {
	return new Promise(function (r){ setTimeout((function () {r()}),ms)})
}
const url = 'https://jsonplaceholder.typicode.com/todos'

function fetchTodos(){
	console.log('Fetch todo started')
	return delay(2000).then(()=>{
	return fetch(url) }).then(response => response.json())
}

fetchTodos()
.then(data =>{
console.log('Data', data)})
.catch(e=>console.error(e))
</script>

рони · #4 (**permalink**) 07.02.2021, 21:07

Сообщение от denis_alekss

Вначале создается анонимная функция с параметром r,

Цитата:

executor
функция с двумя аргументами resolve и reject. Функция executor получает оба аргумента и выполняется сразу, еще до того как конструктор вернет созданный объект. Первый аргумент (resolve) вызывает успешное исполнение промиса, второй (reject) отклоняет его.

может доку сначала?

denis_alekss · #5 (**permalink**) 07.02.2021, 23:17

Я читал что первый параметр resolve если успешно второй если не успешно rejected. Тут просто используется вроде объекты первого класса тема? Глянем на этот код:

function (r) { setTimeout((function () { r() } )

Я попробовал простой пример который не относится вообще к асинхронным функциям, вот ниже написал, просто этот подход используется в том коде.

((n)=>n)(console.log(5))

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

(function (n) {return n})(console.log(5))

Вызывается сразу функция n которую я даже не объявлял, я объявил просто параметр n в анонимной функции.
Как кстати переписать эти 2 строчки чтобы вызвать отдельно а не сразу после объявления?
Понял, вот так можно через ссылку.

let d = (function (n) {return n})
console.log(d(5))

или так:

let d = (n=>n)
console.log(d(5))

voraa · #6 (**permalink**) 07.02.2021, 23:30

Вот это
(function (n) {return n})(console.log(5))

вообще полная ерунда
Перепишите это так

(function () {return})(console.log(5))

И вы получите тот же самый результат.

Ну вы сами подумайте!
Вы объявляете функцию
function (n) {return n}

Потом ее сразу вызываете, передавая параметр console.log(5).
Сначала параметр должен быть вычислен. Он вычисляется, при этом выводит в консоль "5". Функция console.log возвращает undefined. Это значение передается в вашу функцию как параметр n. И потом возвращается.

Ну попробуйте так
(function (n) {console.log(n); return n}) (console.log(5))

Если вы хотите, что бы ВАША функция выводили значение, то надо так
(function (n) { n(5) }) (console.log)

denis_alekss · #7 (**permalink**) 08.02.2021, 00:15

Спассибо за комментарий выше.
Вернемся к коду.

Не совсем понял вот эту строку:

return fetch(url) }).then(response => response.json())

Что происходит здесь? fetch это встроенный метод Обещаний в который мы передаем в качестве параметра url а затем в обещание через тот же подход через функцию response вызываем метод json, он вытягивает эту ссылку или что?

voraa · #8 (**permalink**) 08.02.2021, 07:18

Сообщение от denis_alekss

fetch это встроенный метод Обещаний

fetch - это самостоятельный API для сетевых запросов. Он использует Promise.
Просто надо больше читать документацию.
https://learn.javascript.ru/fetch
https://developer.mozilla.org/ru/docs/Web/API/Fetch_API

fetch(url) - делает запрос к серверу и возвращает Promise, разрешаемый, когда будет получен ответ.
Этот ответ передается как response в then
Если этот ответ представлен в виде строки JSON, response.json() парсит этот ответ и возвращает Promise с объектом результатом.

denis_alekss · #9 (**permalink**) 09.02.2021, 00:08

fetch(url) возвращает объект промис, response это объект промис, который мы создаем в then и через него получаем доступ в json() чтобы вытащить этот url и в дальнейшем вывести ссылку https://jsonplaceholder.typicode.com/todos через консоль?

voraa · #10 (**permalink**) 09.02.2021, 07:32

Сообщение от denis_alekss

fetch(url) возвращает объект промис

- правильно

Сообщение от denis_alekss

response это объект промис, который мы создаем

- нет. response - это значение, с которым разрешился промис, который вернул fetch. В response содержится ответ сервера.

Сообщение от denis_alekss

чтобы вытащить этот url

не понимаю такую терминологию. url - это строка. Зачем и откуда ее надо вытаскивать?

Сообщение от denis_alekss

дальнейшем вывести ссылку https://jsonplaceholder.typicode.com/todos через консоль?

Мы не выводим в консоль ссылку. Мы выводим ответ сервера. Сервер прислал строку JSON. Она находится в response (это не значит, что response - строка. response - объект. В нем много чего находится, в том числе и строка, которую прислал сервер). Метод json() берет эту строку, парсит ее, как строку JSON и переводит в обычный объект javascript.

then тоже возвращает промис, который разрешается со значением объекта, который вернул json().

Форум

Справочник

Discord чат

Курсы javascript