Обзор обещаний JavaScript

Этот учебник охватывает основы обещаний JavaScript, показывая, как вы можете использовать их в разработке JavaScript.

Концепция обещаний не нова для веб-разработки. Многие из нас уже использовали обещания в форме библиотек, таких как Q, when.js, RSVP.js и т. Д. Даже в jQuery есть нечто, называемое отложенным объектом , что похоже на обещание. Но теперь у нас есть встроенная поддержка обещаний в JavaScript, что действительно здорово.

обзор

Объект Promise Это позволяет писать асинхронный код более синхронно. Например, если вы используете API обещаний для выполнения асинхронного вызова удаленной веб-службы, вы создадите объект Promise Предостережение заключается в том, что фактические данные еще не доступны. Он станет доступным, когда запрос будет завершен и ответ будет возвращен из веб-службы. Между тем объект Promise Кроме того, вы можете прикрепить обратные вызовы к объекту Promise

API

Для начала давайте рассмотрим следующий код, который создает новый объект Promise

 const promise = new Promise((resolve, reject) => {
  //asynchronous code goes here
});

Мы начнем с создания нового объекта Promise Обратный вызов принимает два аргумента: resolvereject Весь ваш асинхронный код идет внутри этого обратного вызова. Если все выполнено успешно, обещание выполняется путем вызова resolve() В случае ошибки reject()Error Это указывает на то, что обещание отклонено.

Теперь давайте создадим что-то простое, которое показывает, как используются обещания. Следующий код выполняет асинхронный запрос к веб-службе, которая возвращает случайную шутку в формате JSON. Давайте рассмотрим, как здесь используются обещания:

 const promise = new Promise((resolve, reject) => {
  const request = new XMLHttpRequest();

  request.open('GET', 'https://api.icndb.com/jokes/random');
  request.onload = () => {
    if (request.status === 200) {
      resolve(request.response); // we got data here, so resolve the Promise
    } else {
      reject(Error(request.statusText)); // status is not 200 OK, so reject
    }
  };

  request.onerror = () => {
    reject(Error('Error fetching data.')); // error occurred, reject the  Promise
  };

  request.send(); // send the request
});

console.log('Asynchronous request made.');

promise.then((data) => {
  console.log('Got data! Promise fulfilled.');
  document.body.textContent = JSON.parse(data).value.joke;
}, (error) => {
  console.log('Promise rejected.');
  console.log(error.message);
});

В предыдущем коде обратный вызов конструктора Promise Здесь мы просто создаем Ajax-запрос к https://api.icndb.com/jokes/random , который возвращает случайную шутку. Когда JSON-ответ получен от удаленного сервера, он передается для resolve() В случае любой ошибки reject()Error

Когда мы создаем экземпляр объекта Promise В нашем случае мы ожидаем, что некоторые данные будут возвращены из удаленного сервиса в будущем. Итак, как мы узнаем, когда данные станут доступны? Здесь используется Promise.then() Эта функция принимает два аргумента: обратный вызов успеха и обратный вызов сбоя. Эти обратные вызовы вызываются, когда Promise Если обещание было выполнено, обратный вызов успеха будет запущен с фактическими данными, которые вы передали для resolve() Если обещание было отклонено, будет вызван обратный вызов сбоя. Все, что вы передали reject()

Попробуйте этот пример CodePen . Чтобы просмотреть новую случайную шутку, нажмите кнопку RERUN в нижнем правом углу вставки. Кроме того, откройте консоль браузера, чтобы вы могли видеть порядок выполнения различных частей кода.

 function getPromise(url) {
  // return a Promise here
  // send an async request to the url as a part of promise
  // after getting the result, resolve the promise with it
}

const promise = getPromise('some url here');

promise.then((result) => {
  //we have our result here
  return getPromise(result); //return a promise here again
}).then((result) => {
  //handle the final result
});

 promise.then((result) => {
  console.log('Got data!', result);
}).catch((error) => {
  console.log('Error occurred!', error);
});

 promise.then((result) => {
  console.log('Got data!', result);
}).then(undefined, (error) => {A
  console.log('Error occurred!', erroAr);
});