Асинхронные функции 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>
|
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>
|
Как мы можем вызвать функцию 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>
|
Цитата:
Цитата:
|
Я читал что первый параметр 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)) |
Вот это
(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) |
Спассибо за комментарий выше.
Вернемся к коду. Не совсем понял вот эту строку: return fetch(url) }).then(response => response.json()) Что происходит здесь? fetch это встроенный метод Обещаний в который мы передаем в качестве параметра url а затем в обещание через тот же подход через функцию response вызываем метод json, он вытягивает эту ссылку или что? |
Цитата:
Просто надо больше читать документацию. https://learn.javascript.ru/fetch https://developer.mozilla.org/ru/docs/Web/API/Fetch_API fetch(url) - делает запрос к серверу и возвращает Promise, разрешаемый, когда будет получен ответ. Этот ответ передается как response в then Если этот ответ представлен в виде строки JSON, response.json() парсит этот ответ и возвращает Promise с объектом результатом. |
fetch(url) возвращает объект промис, response это объект промис, который мы создаем в then и через него получаем доступ в json() чтобы вытащить этот url и в дальнейшем вывести ссылку https://jsonplaceholder.typicode.com/todos через консоль?
|
Цитата:
Цитата:
Цитата:
Цитата:
then тоже возвращает промис, который разрешается со значением объекта, который вернул json(). |
| Часовой пояс GMT +3, время: 23:26. |