Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.02.2021, 23:37
Аспирант
Отправить личное сообщение для denis_alekss Посмотреть профиль Найти все сообщения от denis_alekss
 
Регистрация: 01.12.2020
Сообщений: 55

Асинхронные функции async/await
Пытаюсь запустить пример с сайта 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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>
Ответить с цитированием
  #3 (permalink)  
Старый 07.02.2021, 20:33
Аспирант
Отправить личное сообщение для denis_alekss Посмотреть профиль Найти все сообщения от denis_alekss
 
Регистрация: 01.12.2020
Сообщений: 55

Как мы можем вызвать функцию 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от denis_alekss
Вначале создается анонимная функция с параметром r,
Цитата:
executor
функция с двумя аргументами resolve и reject. Функция executor получает оба аргумента и выполняется сразу, еще до того как конструктор вернет созданный объект. Первый аргумент (resolve) вызывает успешное исполнение промиса, второй (reject) отклоняет его.
может доку сначала?
Ответить с цитированием
  #5 (permalink)  
Старый 07.02.2021, 23:17
Аспирант
Отправить личное сообщение для denis_alekss Посмотреть профиль Найти все сообщения от denis_alekss
 
Регистрация: 01.12.2020
Сообщений: 55

Я читал что первый параметр 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))

Последний раз редактировалось denis_alekss, 07.02.2021 в 23:34.
Ответить с цитированием
  #6 (permalink)  
Старый 07.02.2021, 23:30
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,745

Вот это
(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)

Последний раз редактировалось voraa, 07.02.2021 в 23:37.
Ответить с цитированием
  #7 (permalink)  
Старый 08.02.2021, 00:15
Аспирант
Отправить личное сообщение для denis_alekss Посмотреть профиль Найти все сообщения от denis_alekss
 
Регистрация: 01.12.2020
Сообщений: 55

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

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

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


Что происходит здесь? fetch это встроенный метод Обещаний в который мы передаем в качестве параметра url а затем в обещание через тот же подход через функцию response вызываем метод json, он вытягивает эту ссылку или что?
Ответить с цитированием
  #8 (permalink)  
Старый 08.02.2021, 07:18
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,745

Сообщение от 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 с объектом результатом.

Последний раз редактировалось voraa, 08.02.2021 в 07:26.
Ответить с цитированием
  #9 (permalink)  
Старый 09.02.2021, 00:08
Аспирант
Отправить личное сообщение для denis_alekss Посмотреть профиль Найти все сообщения от denis_alekss
 
Регистрация: 01.12.2020
Сообщений: 55

fetch(url) возвращает объект промис, response это объект промис, который мы создаем в then и через него получаем доступ в json() чтобы вытащить этот url и в дальнейшем вывести ссылку https://jsonplaceholder.typicode.com/todos через консоль?
Ответить с цитированием
  #10 (permalink)  
Старый 09.02.2021, 07:32
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,745

Сообщение от 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().

Последний раз редактировалось voraa, 09.02.2021 в 07:41.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
async/await как получить вернуть значение из функции dpts Events/DOM/Window 7 02.04.2020 09:56
Передача результата функции, другой функции Aleksandr Chirkov Элементы интерфейса 3 24.06.2017 17:32
Можно ли так использовать callback функции? Denwf Node.JS 2 14.03.2017 10:20
Асинхронные функции MatrixGru jQuery 3 17.08.2013 21:52
arguments вызвавшей функции mister_maxim Общие вопросы Javascript 4 12.10.2010 16:21