Криптономикон-4 - Самостоятельная работа. Promise, async/await.

#15 Криптономикон-4 - Самостоятельная работа (валидации).

Материалы к работе

Асинхронность в JS, Promise

Асинхронное программирование — концепция программирования, при которой результат выполнения функции доступен спустя некоторое время в виде асинхронного (нарушающего стандартный порядок выполнения) вызова. Запуск длительных операций происходит без ожидания их завершения и не блокирует дальнейшее выполнение программы.

В современном JS асинхронность реализуется через Promise (ожидание) (раньше для этого использовались callback-функции).

Итак, функция, которая не может вернуть результат сразу (например, знакомый уже вам fetch), возвращает специальный объект Promise (в русскоязычном инете его часто так и называют - "промис").

Когда результат будет получен, промис вызывает внутренние методы fulfilled при успешном завершении или rejected при ошибке (названия методов условные, они используются внутри промиса)

Наружу у объекта "промис" выходит 3 метода:

then - при успешном выполнении "промиса"
catch - при ошибке
finally - при любом завершении работы

В итоге вызов fetch может выглядеть примерно так:

fetch(url).then(res => {
    // здесь res строка, поэтому необходимо преобразовать ее в json-объект
    if (res.ok) {
        // метод json тоже асинхронный, поэтому мы возвращаем очередной промис
        return res.json()
    }
    else throw new Error('Что-то пошло не так')
}).then(json => {
    return json
}).catch(error => {
    // можем извлечь текст ошибки и показать клиенту
}).finally(() => {
    // тут мы можем погасить какую-нибудь "крутилку", если запускали её перед fetch
})

В коде используется два метода then, это нормально и называется "цепочкой промисов". Используется, если промежуточный результат нужно преобразовать (у нас возвращается "промис" res.json(), но можно возвращать и синхронный результат).

Выглядит достаточно грмоздко, поэтому придумали синтаксический сахар async/await

Async/await

Ключевое слово await перед вызовом функции говорит системе, что результат будет отложенным (функция вернёт "промис", а конструкция await функция вернет результат "промиса"). Чтобы система знала, что внутри функции используются await вызовы эта функция должна начинаться с ключевого слова async. Пока выполняется await функция выполнение вызывающего кода приостанавливается.

Например, код, который вы уже видели в прошлых заданиях:

setInterval(async () => {
    const f = await fetch(
        `https://min-api.cryptocompare.com/data/price?fsym=${newTicker.name}&tsyms=USD&api_key=ce3fd966e7a1d10d65f907b20bf000552158fd3ed1bd614110baa0ac6cb57a7e`
    )
    const data = await f.json()
    ...

"Синтаксическим сахаром" называют код, который используют только при написании кода. Реальный JS-код преобразуется в "промисы" системой сборки (в одной из лекций мелькало слово "babel")

К чему был весь этот бред? Чтобы вы понимали, что асинхронный код можно вызывать только в функции, объявленной как async. Т.е. не получится прямо в <script setup> написать await fetch. Нужно либо использовать синтаксис с "промисами", либо использовать один из методов жизненного цикла и объявив его асинхронным вызывать await методы в нем

onMounted(async () => {
  const f = await fetch(
    'https://min-api.cryptocompare.com/data/all/coinlist?summary=true'
  )
  const data = await f.json()
  if (data.Response == 'Success') {
    valutes.value = Object.keys(data.Data)
  }
})

Задание

Пересмотреть видео #15 Криптономикон-4 - Самостоятельная работа (валидации) и реализовать домашнее задание:
- не давать добавлять уже существующую валюту (показывать ошибку)
- при редактировании названия валюты очищать ошибку
- при вводе названия валюты выводить подсказку из 4-х похожих валют
  
  При получении списка валют в Data приходит объект, ключами которого являются названия валют. Содержимое нам пока вроде не нужно, поэтому массив валют можно извлеч методом keys:
```
if (data.Response == 'Success') {
    valutes.value = Object.keys(data.Data)
}
```
  Для получения 4-х подходящих валют можно использовать вычисляемые свойства:
```
const shortValutes = computed(() => {
    return valutes.value.filter(v => v.includes(ticker.value.toUpperCase())).slice(0,4)
})
```
  Вычисляемое свойство обновляется при изменении реактивных переменных используемых при вычислении (в нашем случае это ticker), т.е. при редактировании тикера массив валют будет переформировываться.
- при клике на подсказку добавлять валюту из подсказки
- учитывать регистр
Прочитать и осознать Хуки жизненного цикла Vue

Назад | Дальше

web_07.md 8.3 KB Историја Датотека

Криптономикон-4 - Самостоятельная работа. Promise, async/await.

#15 Криптономикон-4 - Самостоятельная работа (валидации).

Асинхронность в JS, Promise

Async/await

web_07.md 8.3 KB

Историја Датотека