Skip to content

Commit

Permalink
Исправляет ошибки и форматирование
Browse files Browse the repository at this point in the history
  • Loading branch information
TatianaFokina committed Sep 28, 2024
1 parent 19a9815 commit 0fdc7c2
Show file tree
Hide file tree
Showing 21 changed files with 204 additions and 192 deletions.
27 changes: 14 additions & 13 deletions js/promise-catch/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ description: "Обрабатываем ситуации, когда обещал
authors:
- nlopin
keywords:
- промис
- кэтч катч кеч
- кэтч
- катч
- кеч
related:
- tools/api
- js/async-in-js
Expand All @@ -24,31 +25,29 @@ tags:

Метод `catch()` используют для обработки ошибки при выполнении асинхронной операции.

Метод _принимает_ один аргумент:

- `onReject` — функция-колбэк, которая будет вызвана при переходе промиса в состояние «ошибка» `rejected`. Функция имеет один параметр, в который передаётся информация об ошибке.
Метод _принимает_ один аргумент — `onReject`. Это функция-колбэк, которая вызовется при переходе промиса в состояние «ошибка» `rejected`. Имеет один параметр, в который передаётся информация об ошибке.

_Возвращает_ промис.

## Как пишется

```js
// getPasswords() — асинхронная функция, которая возвращает промис
// Асинхронная функция, которая возвращает промис
getPasswords()
.then(function (result) {
// выполнится, если операция успешна
// Выполнится, если операция успешна
})
.catch(function (err) {
// колбэк выполнится, если getPassword завершится ошибкой
// Колбэк выполнится, если функция завершилась ошибкой
alert(err.message)
})
```

## Как понять

`catch()` выполняет переданный ему колбэк когда асинхронная операция:
`catch()` выполняет переданный ему колбэк в нескольких случаях.

- вызывает функцию `reject()` внутри промиса.
Асинхронная операция вызывает функцию `reject()` внутри промиса:

```js
const rejectInSecond = new Promise(function (resolve, reject) {
Expand All @@ -63,7 +62,7 @@ rejectInSecond.catch(function (err) {
})
```

- выбрасывает ошибку с помощью `throw`.
Асинхронная операция выбрасывает ошибку с помощью `throw`:

```js
const throwInSecond = new Promise(function (resolve, reject) {
Expand All @@ -78,6 +77,8 @@ throwInSecond.catch(function (err) {
})
```

🔧 Техническая деталь
<aside>

🔧 `catch()` под капотом содержит вызов [`then()`](/js/promise-then/). Первый колбэк установлен в [`undefined`](/js/undefined/): `catch(onReject)``then(undefined, onReject)`.

Под капотом `catch()` содержит вызов [`then()`](/js/promise-then/), где первый колбэк установлен в [`undefined`](/js/undefined/): `catch(onReject)``then(undefined, onReject)`.
</aside>
2 changes: 1 addition & 1 deletion js/promise-catch/practice/nlopin.md
Original file line number Diff line number Diff line change
@@ -1 +1 @@
🛠 Всегда завершайте свои цепочки промисов вызовом метода `catch()`. Если в одной из операций в цепочке произойдёт ошибка, и она не будет обработана, то JavaScript выведет сообщение `Uncaught (in promise) Error` в консоль разработчика и перестанет работать на всей странице.
🛠 Всегда завершайте цепочки промисов вызовом метода `catch()`. Если в одной из операций в цепочке произойдёт ошибка, она не обработается и перестанет работать на всей странице. JavaScript выведет в консоль разработчика сообщение `Uncaught (in promise) Error`.
15 changes: 6 additions & 9 deletions js/promise-finally/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ description: "Выполняем код вне зависимости от ре
authors:
- nlopin
keywords:
- промис
- файнали
related:
- tools/api
Expand All @@ -24,31 +23,29 @@ tags:

Метод `finally()` используют для выполнения кода при завершении промиса. Код выполнится как при переходе промиса в состояние `fulfilled`, так и в `rejected`.

Метод _принимает_ один аргумент:

- `onDone` — функция-колбэк, которая будет вызвана при завершении промиса.
Метод _принимает_ один аргумент — `onDone`. Это функция-колбэк, которая вызовется при завершении промиса.

_Возвращает_ новый промис.

## Как пишется

```js
// getPasswords() — асинхронная функция, которая возвращает промис
// Асинхронная функция, которая возвращает промис
getPasswords().finally(function () {
// выполнится, когда операция завершилась успехом или ошибкой
// Выполнится, когда операция завершилась успехом или ошибкой
})
```

## Как понять

`finally()` выполняет переданный ему колбэк независимо от того, как завершилась асинхронная операция.

Метод используют для того, чтобы избежать повторения кода между [`then()`](/js/promise-then/) и [`catch()`](/js/promise-catch/). Обычно такой код занимается уборкой после операции — скрывает индикаторы загрузки, закрывает меню и т.д.
Метод используют для того чтобы избежать повторения кода между [`then()`](/js/promise-then/) и [`catch()`](/js/promise-catch/). Обычно такой код занимается уборкой после операции — скрывает индикаторы загрузки, закрывает меню и так далее.

Колбэк у `finally()` не содержит параметров. Это следствие того, что колбэк будет вызван как при успехе, так и при ошибке.
Колбэк у `finally()` не содержит параметров. Это следствие того, что колбэк вызывается как при успехе, так и при ошибке.

<aside>

🔧 Техническая деталь. Под капотом `finally()` — это вызов `then()`, где оба колбэка `onDone`: `finally(onDone)``then(onDone, onDone)`.
🔧 Под капотом `finally()` — это вызов `then()`, где оба колбэка `onDone`: `finally(onDone)``then(onDone, onDone)`.

</aside>
4 changes: 2 additions & 2 deletions js/promise-finally/practice/nlopin.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
🛠 `finally()` отлично работает в случаях, когда нужно убрать лоадер со страницы или кнопки. Он сработает вне зависимости от результата промиса, поэтому можно избежать дублирования кода.
🛠 `finally()` отлично работает в случаях, когда убираем лоадер со страницы или кнопки. Он сработает вне зависимости от результата промиса, поэтому можно избежать дублирования кода.

Вместо:

```js
// используем, флаг чтобы показать что форма отправляется
// Используем флаг, чтобы показать процесс отправки формы
let isLoading = true
sendForm().then((res) => {
isLoading = false
Expand Down
37 changes: 25 additions & 12 deletions js/promise-race/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,13 @@ tags:

## Как пишется

`Promise.race()` принимает итерируемую коллекцию промисов (чаще всего — [массив](/js/arrays/)) и возвращает новый промис.
Он завершится, когда завершится самый быстрый из всех переданных. Остальные промисы будут проигнорированы.
`Promise.race()` принимает итерируемую коллекцию промисов, чаще всего — [массив](/js/arrays/). Потом метод возвращает новый промис.

Метод завершится, когда завершится самый быстрый из всех переданных. Остальные промисы будут проигнорированы.

## Как понять

### Самый быстрый промис завершается успешно
### Гонка промисов с успехом

Создадим несколько промисов, завершающихся без ошибок.

Expand All @@ -50,14 +51,19 @@ Promise.race([slow, fast, theFastest])

В консоль запишется результат выполнения `theFastest`, так как он выполнился быстрее всех.

### Самый быстрый промис завершается с ошибкой
### Гонка промисов с ошибкой

Создадим несколько промисов, где `theFastest` завершается с ошибкой.

```js
const slow = new Promise(resolve => setTimeout(() => resolve(1), 6000))
const fast = new Promise(resolve => setTimeout(() => resolve(2), 3000))
const theFastest = new Promise((resolve, reject) => setTimeout(() => reject('Some error'), 1000))
const slow = new Promise(
resolve => setTimeout(() => resolve(1), 6000)
)
const fast = new Promise(
resolve => setTimeout(() => resolve(2), 3000)
)
const theFastest = new Promise(
(resolve, reject) => setTimeout(() => reject('Some error'), 1000))
```

Передадим массив из созданных промисов в `Promise.race()`:
Expand All @@ -66,7 +72,8 @@ const theFastest = new Promise((resolve, reject) => setTimeout(() => reject('Som
Promise.race([slow, fast, theFastest])
.then((value) => {
console.log(value)
// эта часть будет проигнорирована, так как быстрее всех завершился промис с ошибкой
// Промис с ошибкой завершился быстрее —
// эта часть проигнорируется
})
.catch((error) => {
console.log(error)
Expand Down Expand Up @@ -101,9 +108,15 @@ Promise.race([])
Создадим ещё раз несколько промисов, где `theFastest` завершается с ошибкой:

```js
const slow = new Promise(resolve => setTimeout(() => resolve(1), 6000))
const fast = new Promise(resolve => setTimeout(() => resolve(2), 3000))
const theFastest = new Promise((resolve, reject) => setTimeout(() => reject('Some error'), 1000))
const slow = new Promise(
resolve => setTimeout(() => resolve(1), 6000)
)
const fast = new Promise(
resolve => setTimeout(() => resolve(2), 3000)
)
const theFastest = new Promise(
(resolve, reject) => setTimeout(() => reject('Some error'), 1000)
)
```

Передадим массив из созданных промисов в `Promise.any()`:
Expand All @@ -116,7 +129,7 @@ Promise.any([slow, fast, theFastest])
})
.catch((error) => {
console.log(error)
// в эту часть кода мы не попадём
// Сюда мы не попадём
})
```

Expand Down
37 changes: 18 additions & 19 deletions js/promise-then/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: "`.then()`"
description: "Обрабатываем ситуацию, когда пообещали значение — и выполнили обещание."
authors:
- nlopin
keywords:
- промис
related:
- tools/api
- js/async-in-js
Expand All @@ -23,24 +21,24 @@ tags:

Метод `then()` используют, чтобы выполнить код после изменения состояния промиса.

Метод принимает два аргумента:
Метод _принимает_ два аргумента:

- `onFulfill` — функция-колбэк, которая будет вызвана при переходе промиса в состояние «успех» `fulfilled`. Функция имеет один параметр, в который передаётся результат выполнения операции
- `onReject` — функция-колбэк, которая будет вызвана при переходе промиса в состояние «ошибка» `rejected`. Функция имеет один параметр, в который передаётся информация об ошибке
- `onFulfill` — функция-колбэк, которая вызывается при переходе промиса в состояние «успех» `fulfilled`. Функция имеет один параметр, в который передаётся результат выполнения операции.
- `onReject` — функция-колбэк, которая вызывается при переходе промиса в состояние «ошибка» `rejected`. У функции один параметр, в который передаётся информация об ошибке.

Всегда возвращает новый промис.
Всегда _возвращает_ новый промис.

## Как пишется

```js
// getPasswords() — асинхронная функция, которая возвращает промис
// Асинхронная функция, которая возвращает промис
getPasswords().then(
function (result) {
// что-то делаем с результатом операции
// Что-то делаем с результатом операции
console.log('Все пароли:' + result)
},
function (err) {
// обрабатываем ошибку
// Обрабатываем ошибку
console.error(err.message)
}
)
Expand All @@ -50,29 +48,30 @@ getPasswords().then(

Обработка асинхронных операций через промис и `then()` очень похожа на работу с колбэками.

Так как `then()` всегда возвращает новый промис, то его удобно использовать для построения последовательностей асинхронных операций:
Так как `then()` всегда возвращает новый промис, его удобно использовать для построения последовательностей асинхронных операций. Например, мы запрашиваем через API список домов из «Игры престолов», запускаем асинхронную операцию парсинга JSON из ответа сервера и дополнительно запрашиваем сюзерена дома.

```js
// запросим через API список домов из Игры престолов. Метод `fetch` возвращает промис
// Запрос списка; `fetch` возвращает промис
fetch('https://www.anapioficeandfire.com/api/houses')
.then(function (response) {
// выполнится, когда от API придет ответ
// Выполнится, когда придёт ответ

// запустим асинхронную операцию парсинга JSON из ответа сервера
return response.json() // вернем из обработчика промис, к которому добавим then
// Парсим JSON из ответа сервера.
// Возвращаем промис из обработчика; потом добавим `then`
return response.json()
})
.then(function (houses) {
// выполнится, когда JSON распарсится

return fetch(houses[0].overlord) // запросим данные о сюзерене этого дома
// Выполнится, когда JSON распарсится.
// Запрашиваем дополнительные данные
return fetch(houses[0].overlord)
})
.then(function (response) {
// выполнится, когда от API придет ответ
// Выполнится, когда придёт ответ
return response.json()
})
.then(function (overlord) {
console.log(overlord.name)
})
```

В коде выше, каждый вызов `then()` привязан к результату предыдущей операции. Такой код читается почти как синхронный.
В коде каждый вызов `then()` привязан к результату предыдущей операции. Такой код читается почти как синхронный.
4 changes: 2 additions & 2 deletions js/promise-then/practice/nlopin.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
🛠 `then()` в индустрии используется только для обработки успешного завершения операции, в варианте с одним аргументом:
🛠 `then()` используют только для обработки успешного завершения операции, в варианте с одним аргументом:

```js
getPasswords().then(function (result) {
// что-то делаем с результатом операции
// Что-то делаем с результатом операции
console.log(`Все пароли: ${result}`)
})
```
Expand Down
2 changes: 1 addition & 1 deletion js/prompt/demos/vindi-r-OqZYEe/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Демонстрация работы - prompt() — Дока</title>
<title>Пример работы prompt() — Дока</title>
</head>
<body>
<button onclick="prompt('Как тебя зовут?', 'Имя')">Нажми меня</button>
Expand Down
2 changes: 1 addition & 1 deletion js/prompt/demos/vindi-r-jJxjNM/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Демонстрация работы - Как понять prompt() — Дока</title>
<title>Приведение к строке — prompt() — Дока</title>
</head>
<body>
<button onclick="checkAnswer()">Нажми меня</button>
Expand Down
2 changes: 1 addition & 1 deletion js/prompt/demos/vindi-r-xBjowJ/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Демонстрация работы - prompt() — Дока</title>
<title>prompt() с кастомным окном — prompt() — Дока</title>
<style>
#dialog-overlay {
display: none;
Expand Down
Loading

0 comments on commit 0fdc7c2

Please sign in to comment.