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

    JavaScript

    .finally()

    Выполняем код вне зависимости от результата промиса.

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

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

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

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

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

    Как пишется

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

    Как понять

    Скопировано

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

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

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

    На практике

    Скопировано

    Николай Лопин советует

    Скопировано

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

    Вместо:

            
          
          // используем, флаг чтобы показать что форма отправляетсяlet isLoading = truesendForm().then((res) => {    isLoading = false    alert('ok')}).catch((err) => {    isLoading = false    alert(`Ошибка: ${err.message}`)})
          // используем, флаг чтобы показать что форма отправляется
let isLoading = true
sendForm().then((res) => {
    isLoading = false
    alert('ok')
}).catch((err) => {
    isLoading = false
    alert(`Ошибка: ${err.message}`)
})

    Можно написать:

            
          
          let isLoading = truesendForm().then((res) => {    alert('ok')}).catch((err) => {    alert(`Ошибка: ${err.message}`)}).finally(() => {    isLoading = false})
          let isLoading = true
sendForm().then((res) => {
    alert('ok')
}).catch((err) => {
    alert(`Ошибка: ${err.message}`)
}).finally(() => {
    isLoading = false
})

    Читайте также