Как работают параметры метод then?

Параметры метода then() в Promise

Метод then() - основной способ работы с результатами Promise. Он принимает два необязательных параметра: обработчик успеха и обработчик ошибки. Понимание их работы критично для асинхронного программирования.

Основная синтаксис

const promise = fetch('/api/data');

// then имеет два параметра
promise.then(
  (value) => { /* обработчик успеха */ },
  (error) => { /* обработчик ошибки */ }
);

// Параметры:
// 1. onFulfilled (успех) - функция, вызовется если Promise выполнился успешно
// 2. onRejected (ошибка) - функция, вызовется если Promise был отклонен

Обработчик успеха (onFulfilled)

const promise = Promise.resolve('Данные получены!');

// onFulfilled вызывается с результатом
promise.then((value) => {
  console.log(value); // "Данные получены!"
});

// Практический пример с fetch
fetch('/api/v1/users')
  .then((response) => {
    console.log('Статус:', response.status);
    return response.json(); // Возвращаем новый Promise
  })
  .then((data) => {
    console.log('Пользователи:', data);
  });

// Обработчик может вернуть:
// 1. Значение - перейдет в следующий then
// 2. Promise - дождется разрешения Promise
// 3. Ничего (undefined) - передаст undefined в следующий then

Обработчик ошибки (onRejected)

const badPromise = Promise.reject('Ошибка сервера');

// onRejected вызывается с причиной отклонения
badPromise.then(
  null, // нет обработчика успеха
  (error) => {
    console.error('Ошибка:', error); // "Ошибка сервера"
  }
);

// Или использовать catch
badPromise.catch((error) => {
  console.error('Перехвачена ошибка:', error);
});

// Практический пример
fetch('/api/v1/data')
  .then(
    (response) => response.json(),
    (networkError) => {
      console.error('Сетевая ошибка:', networkError);
      throw new Error('Не удалось подключиться к серверу');
    }
  )
  .catch((error) => {
    console.error('Обработана ошибка:', error);
  });

Цепочка then()

fetch('/api/v1/users/1')
  .then((response) => response.json())      // Параметр 1
  .then((user) => {                          // Параметр результата из предыдущего
    console.log('Пользователь:', user);
    return fetch(`/api/v1/posts/${user.id}`);
  })
  .then((response) => response.json())       // Параметр из fetch
  .then((posts) => {                         // Параметр постов
    console.log('Посты:', posts);
  })
  .catch((error) => {                        // Ловит ошибку из любого then
    console.error('Что-то пошло не так:', error);
  });

// Каждый then получает результат предыдущего
// Если ошибка - она пройдет по цепочке до catch

Игнорирование параметров

const promise = Promise.resolve({ name: 'John', age: 30 });

// Можно вызвать then с одним параметром
promise.then((data) => {
  console.log('Успех:', data);
});

// Или вообще без параметров для side effects
promise.then(() => {
  console.log('Promise разрешен'); // параметр не используется
});

// Старый паттерн - then с двумя параметрами
promise.then(
  (data) => console.log('Успех:', data),
  (error) => console.error('Ошибка:', error)
);

// Современный паттерн - отдельные then/catch
promise
  .then((data) => console.log('Успех:', data))
  .catch((error) => console.error('Ошибка:', error));

Возвращаемые значения

const promise = Promise.resolve(10);

// Возврат значения
promise
  .then((value) => {
    console.log('Получено:', value); // 10
    return value * 2; // Возвращаем число
  })
  .then((doubled) => {
    console.log('Удвоено:', doubled); // 20
  });

// Возврат Promise
promise
  .then((value) => {
    return new Promise((resolve) => {
      setTimeout(() => resolve(value + 100), 1000);
    });
  })
  .then((result) => {
    console.log('Результат:', result); // 110 (после 1 сек)
  });

// Возврат undefined
promise
  .then((value) => {
    console.log('Значение:', value);
    // ничего не возвращаем
  })
  .then((result) => {
    console.log('Результат:', result); // undefined
  });

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

fetch('/api/data')
  .then(
    (response) => {
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      return response.json();
    },
    (networkError) => {
      console.error('Сетевая ошибка:', networkError);
      // Обработка сетевой ошибки
    }
  )
  .then(
    (data) => console.log('Данные:', data),
    (error) => console.error('Ошибка парсинга:', error)
  );

// Важно: then с двумя параметрами не ловит ошибки из первого параметра
// Поэтому лучше использовать catch

fetch('/api/data')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error('Любая ошибка:', error));

then() vs async/await

// then() - классический способ
function getUser(id) {
  return fetch(`/api/v1/users/${id}`)
    .then((response) => response.json())
    .then((user) => {
      console.log('Пользователь:', user);
      return user;
    })
    .catch((error) => {
      console.error('Ошибка:', error);
    });
}

// async/await - современный способ (работает с Promise)
async function getUser(id) {
  try {
    const response = await fetch(`/api/v1/users/${id}`);
    const user = await response.json();
    console.log('Пользователь:', user);
    return user;
  } catch (error) {
    console.error('Ошибка:', error);
  }
}

// Оба способа работают с Promise одинаково

They параметры then() - это мощный механизм для работы с асинхронным кодом. Современные приложения часто используют async/await, но понимание then() остается важным.