логотип PurpleSchool
логотип PurpleSchool

Метод then() в JavaScript

Автор

Дмитрий Нечаев

В JavaScript для работы с асинхронными операциями часто используются промисы. Промис — это объект, который представляет собой завершение или неудачу асинхронной операции и её результат. Метод .then() является частью прототипа Promise и используется для планирования работы с успешным или ошибочным исходом промиса.

Основы метода .then()

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

Синтаксис

promise.then(onFulfilled, onRejected);
  • onFulfilled — функция, которая будет вызвана, если промис исполнится успешно. Эта функция имеет один аргумент, значение, с которым промис был выполнен.
  • onRejected — функция, которая будет вызвана, если промис завершится с ошибкой. Этот параметр необязательный.

Пример использования

Допустим, у нас есть функция, которая возвращает промис, разрешающийся с некоторым значением после 2 секунд:

function resolveLater() {
    return new Promise((resolve) => {
        setTimeout(() => resolve("обещание выполнено"), 2000);
    });
}

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

resolveLater().then(value => {
    console.log(value);  // Выведет "обещание выполнено"
});

Обработка ошибок

.then() также может принимать вторую функцию, которая будет вызвана, если промис будет отклонён:

function rejectLater() {
    return new Promise((resolve, reject) => {
        setTimeout(() => reject(new Error("произошла ошибка")), 2000);
    });
}

rejectLater().then(
    value => console.log(value),
    error => console.error(error)  // Выведет "Error: произошла ошибка"
);

Цепочка промисов

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

resolveLater()
    .then(value => {
        console.log(value);  // "обещание выполнено"
        return rejectLater();
    })
    .then(
        value => console.log(value),
        error => console.error(error)  // "Error: произошла ошибка"
    );

Это позволяет строить сложные асинхронные цепочки, где каждый следующий шаг зависит от результата предыдущего.

Заключение

Метод .then() является мощным инструментом для работы с асинхронными операциями в JavaScript. Он позволяет обрабатывать результаты асинхронных операций удобным и читаемым способом, а также строить сложные цепочки асинхронных операций. Эффективное использование .then() может значительно упростить ваш код и сделать его более устойчивым к ошибкам.

Метод Promise.race() в JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний