Promises в 2018

Как работают промисы в JS

7

Promises

  • Объект, который отслеживает, произошло ли какое-либо событие или нет
  • Определяет, что происходит после того, как произошло событие
  • Реализует концепцию будущей ценности, которую мы ожидаем

У промисов есть несколько состояний

  • Прежде чем событие случиться промис находится в состоянии pending — ожидания
  • Затем, после того как событие произошло, промис становится settled или resolved (улаженным или разрешенным). (Одно и тоже)
  • Теперь, когда обещание было действительно успешным, а это значит, что результат доступен, тогда обещание выполняется (fulfilled), но если была ошибка, тогда обещание отклонено (rejected)

Promises

В промис мы передаем execution function, которая принимает два параметра. И эта функция выполнения используется для того чтобы информировать промис, было ли событие, которое оно обрабатывает, успешным или нет.
Если оно было успешным, то мы вызываем resolve функцию. Если нет — то reject

new Promise((resolve, reject) => {
  //async code
});

Также мы можем использовать два метода для всех promisов — then и catch.
Т.е. все объекты промисы наследуют эти два метода.
Then — Этот метод позволяет нам добавить обработчик события для случая, если обещание, если оно выполнено (fulfilled). Что означает что там есть результат успешно выполненного промиса. В качестве аргумента этого обработчика событий (callbackа) — передается результат.

const getIDs = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve([523, 885, 235, 958]);
  }, 1500);
});

getIDs
  .then(IDs => {
    console.log(IDs);
  })
  .catch(error => console.error(error));

Также мы моем составить цепочку promisов (promise chaining)

const getIDs = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve([523, 885, 235, 958]);
  }, 1500);
});

const getRecipe = recID => {
  return new Promise((resolve, reject) => {
    setTimeout(
      id => {
        const recipe = {
          title: "Fresh Tomato Pasta",
          publisher: "Eugene"
        };
        resolve(`${id}: ${recipe.title}`);
      },
      1500,
      recID
    );
  });
};

const getRelated = publisher => {
  return new Promise((resolve, reject) => {
    setTimeout(
      pub => {
        const recipe = {
          title: "Italian pizza",
          publisher: "Eugene"
        };
        resolve(`${pub}: ${recipe.title}`);
      },
      1500,
      publisher
    );
  });
};

getIDs
  .then(IDs => {
    console.log(IDs);
    return getRecipe(IDs[2]);
  })
  .then(recipe => {
    console.log(recipe);
    return getRelated("Eugene");
  })
  .then(recipe => console.log(recipe))
  .catch(error => {
    console.error(error);
  });

Async / Await

Async/Await был сделан для того чтобы использовать промисы, но не для того чтобы их делать.

Продложим на прошлом примере

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

Внутри Async функции может быть одна или несколько Await выражений (await expressions).
Чтобы воспользоваться промисом мы вызываем его с помощью await и передаем значение константе IDs

async function getRecipeAW() {
  const IDs = await getIDs;
}

Этот getIDs является нашим первым промисом

async function getRecipeAW() {
  const IDs = await getIDs;
  console.log(IDs);
  const recipe = await getRecipe(IDs[2]);
  console.log(recipe);
  const related = await getRelated("Eugene Sikirzhitksy");
  console.log(related);
}
getRecipeAW();

Таким образом: первая функция ждем выполнения, как только результат готов, присваивается константе IDs, затем выполняются остальные асинхронные функции по тому же принципу.

Важно!

await expression может работать только внутри Async функции

Async функции работать в фоновом режиме.

Асинхронная функция всегда автоматически возвращает промис. И если мы вернем значение из асинхронной функции с помощью return — промис будет автоматически зарезолвен (be resolved) с этим возврашенным значение.

Пример:

async function getRecipeAW() {
  const IDs = await getIDs;
  console.log(IDs);
  const recipe = await getRecipe(IDs[2]);
  console.log(recipe);
  const related = await getRelated("Eugene Sikirzhitksy");
  console.log(related);

  return recipe;
}
const rec = getRecipeAW().then(result => console.log(`Привет я - ${result}`));

You might also like More from author

Leave A Reply

Your email address will not be published.