Меню

Promises в 2018

08.05.2018 - java script, ЯП
Promises в 2018

Promises

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

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}`));
Метки: ,

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *