Promise

Question 1

what is promise chaining

Answer 1

Promise chaining is a syntax that allows you to chain together multiple asynchronous tasks in a specific order. This is great for complex code where one asynchronous task needs to be performed after the completion of a different asynchronous task

Идея состоит в том, что результат первого промиса передаётся по цепочке обработчиков .then.

1. Начальный промис успешно выполняется через 1 секунду (*),
2. Затем вызывается обработчик в .then (**).
3. Возвращаемое им значение передаётся дальше в следующий обработчик .then (***)

Question 2

результат выполнения кода?
let promise = new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000);
});

promise.then(function(result) {
alert(result);
return result * 2;
});

promise.then(function(result) {
alert(result);
return result * 2;
});

Answer 2

1

Поток выполнения такой:

Начальный промис успешно выполняется через 1 секунду (*)

Question 3

what is promise in js?

Question 4

Можно ли “перевыполнить” промис?
Что выведет код ниже?

let promise = new Promise(function(resolve, reject) {
  resolve(1);

setTimeout(() => resolve(2), 1000);
});

promise.then(alert);
решение

Answer 4

Вывод будет: 1.

Второй вызов resolve будет проигнорирован, поскольку учитывается только первый вызов reject/resolve. Все последующие вызовы – игнорируются.

Question 5

Встроенная функция setTimeout использует колбэк-функции. Создайте альтернативу, использующую промисы.

function delay(ms) {
  // ваш код
}

delay(3000).then(() => alert(‘выполнилось через 3 секунды’));

Answer 5

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

delay(3000).then(() => alert(‘выполнилось через 3 секунды’));

Заметьте, что resolve вызывается без аргументов. Мы не возвращаем из delay ничего, просто гарантируем задержку.

Question 6

для чего используется catch

Answer 6

Цепочки промисов отлично подходят для перехвата ошибок. Если промис завершается с ошибкой, то управление переходит в ближайший обработчик ошибок. На практике это очень удобно.

Например, для fetch указана неправильная ссылка (сайт не существует), и .catch перехватывает ошибку:

fetch(‘https://no-such-server.blabla’) // ошибка
.then(response => response.json())
.catch(err => alert(err)) // TypeError: failed to fetch (текст может отличаться)

Как видно, .catch не обязательно должен быть сразу после ошибки, он может быть далее, после одного или даже нескольких .then

Или, может быть, с сервером всё в порядке, но в ответе мы получим некорректный JSON. Самый лёгкий путь перехватить все ошибки – это добавить .catch в конец цепочки

Question 7

Что происходит, когда обычная ошибка не перехвачена try..catch? И в случае необработанной ошибки промиса.

Answer 7

Скрипт умирает с сообщением в консоли.
JavaScript-движок отслеживает такие ситуации и генерирует в этом случае глобальную ошибку. Вы можете увидеть её в консоли.

Question 8

Promise Methods. What is Promise.all?

Answer 8

Promise.all
Допустим, нам нужно запустить множество промисов параллельно и дождаться, пока все они выполнятся.

Например, параллельно загрузить несколько файлов и обработать результат, когда он готов.

Для этого как раз и пригодится Promise.all.

let promise = Promise.all(iterable);
Метод Promise.all принимает массив промисов (может принимать любой перебираемый объект, но обычно используется массив) и возвращает новый промис.

Новый промис завершится, когда завершится весь переданный список промисов, и его результатом будет массив их результатов.

Question 9

Promise Methods Если любой из промисов в Promise.All завершится с ошибкой что будет дальше?

Answer 9

Если один промис завершается с ошибкой, то весь Promise.all завершается с ней, полностью забывая про остальные промисы в списке. Их результаты игнорируются.

Например, если сделано несколько вызовов fetch, как в примере выше, и один не прошёл, то остальные будут всё ещё выполняться, но Promise.all за ними уже не смотрит. Скорее всего, они так или иначе завершатся, но их результаты будут проигнорированы.

Question 10

*Promise Methods What is Promise.allSettled

Answer 10

Cинтаксис:

let promise = Promise.allSettled(iterable);
Promise.all завершается с ошибкой, если она возникает в любом из переданных промисов. Это подходит для ситуаций «всё или ничего», когда нам нужны все результаты для продолжения:

Метод Promise.allSettled всегда ждёт завершения всех промисов. В массиве результатов будет

{status:”fulfilled”, value:результат} для успешных завершений,
{status:”rejected”, reason:ошибка} для ошибок.
Например, мы хотели бы загрузить информацию о множестве пользователей. Даже если в каком-то запросе ошибка, нас всё равно интересуют остальные.

Question 11

Promise methods Что такое Полифил?

Answer 11

Если браузер не поддерживает Promise.allSettled, для него легко сделать полифил:

if(!Promise.allSettled) {
  Promise.allSettled = function(promises) {
    return Promise.all(promises.map(p => Promise.resolve(p).then(value => ({
      status: 'fulfilled',
      value: value
    }), error => ({
      status: 'rejected',
      reason: error
    }))));
  };
}

Question 12

Promise Methods Promise.race

Answer 12

Метод очень похож на Promise.all, но ждёт только первый выполненный промис, из которого берёт результат (или ошибку).

Синтаксис:

let promise = Promise.race(iterable);
Например, тут результат будет 1:

Promise.race([
new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
new Promise((resolve, reject) => setTimeout(() => reject(new Error(“Ошибка!”)), 2000)),
new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
]).then(alert); // 1
Быстрее всех выполнился первый промис, он и дал результат. После этого остальные промисы игнорируются.

Question 13

Promise Methods resolve/reject

Answer 13

Promise.resolve(value) создаёт успешно выполненный промис с результатом value.

Promise.reject(error) создаёт промис, завершённый с ошибкой error.

Question 14

• что такое Промисификация ?

Answer 14

Эта функция-обёртка возвращает промис и передаёт вызов оригинальной f, отслеживая результат в своём колбэке:

Question 15

Обработчики промисов .then/.catch/.finally всегда асинхронны?

Answer 15

да

Question 16

что будет в результате выполнения, почему?

let promise = Promise.resolve();

promise.then(() => alert(“промис выполнен”));

alert(“код выполнен”);

Answer 16

сначала код выполнен, а потом промис выполнен.

Асинхронные задачи требуют правильного управления. Для этого стандарт предусматривает внутреннюю очередь PromiseJobs, более известную как «очередь микрозадач (microtask queue)» (термин V8).

Как сказано в спецификации:

Очередь определяется как первым-пришёл-первым-ушёл (FIFO): задачи, попавшие в очередь первыми, выполняются тоже первыми.
Выполнение задачи происходит только в том случае, если ничего больше не запущено.
Или, проще говоря, когда промис выполнен, его обработчики .then/catch/finally попадают в очередь. Они пока не выполняются. Движок JavaScript берёт задачу из очереди и выполняет её, когда он освободится от выполнения текущего кода.

Вот почему сообщение «код выполнен» в примере выше будет показано первым.

Question 17

what is Async/await? Syntaxis? benefits? what returns by async?

Answer 17

Ключевое слово await заставит интерпретатор JavaScript ждать до тех пор, пока промис справа от await не выполнится. После чего оно вернёт его результат, и выполнение кода продолжится.

По сути, это просто «синтаксический сахар» для получения результата промиса, более наглядный, чем promise.then.

What is async/await?
async/await is a new way to write promise chains in a shorter way.

For example, instead of calling the then function with a callback like we had above, we rewrite it to:

try {
    const readFileData = await promiseReadFile('somefile.txt');
    console.log(readFileData);
    const readDirData = await promiseReadDir('directory');
    console.log(readDirData);
    const makeFileData = await promiseMakwDir('directory');
    console.log(makeFileData);
    return makeFileData;
  }
  catch(err){
    console.log(err);
  }  
})();

Question 18

what is a result of

async function f() {
return 1;
}

f().then(alert);

Answer 18

1

Question 19

how/where to use following code

let value = await promise;

Answer 19

only inside async function

Question 20

how to handle error in async function?

Answer 20

async function f() {
  let response = await fetch('http://no-such-url');
}

// f() вернёт промис в состоянии rejected
f().catch(alert); // TypeError: failed to fetch // (*)

Если забыть добавить .catch, то будет сгенерирована ошибка «Uncaught promise error» и информация об этом будет выведена в консоль.

Такие ошибки можно поймать глобальным обработчиком, о чём подробно написано в разделе Промисы: обработка ошибок.???

Question 21

developpaper

var p = new Promise((resolve, reject) => {
reject(Error(‘The Fails!’))
})
p.catch(error => console.log(error.message))
p.catch(error => console.log(error.message))

What will the output of the above code be? Please choose the correct answer:

[] print a message once
[] Print the message twice
[ ]UnhandledPromiseRejectionWarning
[] program exit

Answer 21

Print the message twice

We use the constructor method to create a promise and immediately trigger the error through the reject callback.

then. Catch works similarly to dom Addeventlistener (event, callback) or event emitter On (event, callback), where multiple callbacks can be added. Each is called with the same parameters.

Question 22

developpaper

var p = new Promise((resolve, reject) => {
return Promise.reject(Error(‘The Fails!’))
})
p.catch(error => console.log(error.message))
p.catch(error => console.log(error.message))

What will the output of the above code be? Please choose the correct answer:

[] print a message once
[] print message twice
[]UnhandledPromiseRejectionWarning
[] program exit

Answer 22

[x]UnhandledPromiseRejectionWarning

When using promise constructor, you must call the resolve() or reject() callback. Promise constructor doesn’t use your return value, so it won’t actually receive any more from promise Other promises created by reject().

Question 23

developpaper

var p = new Promise((resolve, reject) => {
reject(Error(‘The Fails!’))
})
.catch(error => console.log(error))
.then(error => console.log(error))
What will the output of the above code be? Please choose the correct answer:

[] Print errors and undefined
[] print twice error
[ ]UnhandledPromiseRejectionWarning
[ ]undefined

Answer 23

Print errors and undefined

When link Then and When you catch, it’s helpful to think of them as a series of steps. Each Then all receive the previous one Then returns the value as its parameter. However, if your “step” encounters an error, no follow-up action will be taken Then “steps” will be skipped until they are encountered catch。 If you want to overwrite the error, all you have to do is return a non error value. This can be done by any subsequent Then visit.

Tip: console Log() always returns undefined.

Question 24

developpaper

var p = new Promise((resolve, reject) => {
reject(Error(‘The Fails!’))
})
.catch(error => console.log(error.message))
.catch(error => console.log(error.message))

What will the output of the above code be?

[] Print an error message
[] print error message twice
[ ] UnhandledPromiseRejectionWarning
[] program exit

Answer 24

Print an error message

When link When catching, each process only the previous Then or ` Error raised in catch step. In this case, the first one Catch returns console Log can only be passed in two Add after catch Then().

Question 25

developpaper

new Promise((resolve, reject) => {
    resolve('Success!')
  })
  .then(() => {
    throw Error('Oh noes!')
  })
  .catch(error => {
    return "actually, that worked"
  })
  .catch(error => console.log(error.message))
What will the output of the above code be? 

[] print a message once
[] print message twice
[ ] UnhandledPromiseRejectionWarning
[] Don’t print anything

Answer 25

Don’t print anything

Tip: Catch can simply ignore (or overwrite) errors by returning a regular value.

This technique will only be used in subsequent Then is valid when the value is received.

Question 26

developpaper

Promise.resolve('Success!')
  .then(data => {
    return data.toUpperCase()
  })
  .then(data => {
    console.log(data)
  })
What will the output of the above code be? 

[] print “success!” And “success!”
[] print “success!”
[] Print “success!”
[] do not print anything

Answer 26

Print “success!”

Tip: Then passes the data in turn, from return value to the next then(value => /* handle value */)。

To pass the value to the next Then, return is the key.

Question 27

developpaper

Promise.resolve('Success!')
  .then(data => {
    return data.toUpperCase()
  })
  .then(data => {
    console.log(data)
    return data
  })
  .then(console.log)

What will the output of the above code be?

[] print “success!”
[] print “success!”
[] Print “success!” And “success!”
[] do not print anything

Answer 27

Print “success!” And “success!”

There are two consoles The log call will be called.

Question 28

developeppaer

Promise.resolve('Success!')
  .then(data => {
    data.toUpperCase()
  })
  .then(data => {
    console.log(data)
  })

What will the output of the above code be?

[] print “success!”
[] print “success!”
[] print “success!” And “success!”
[] Print undefined

Answer 28

Print undefined:

Tip: Then passes the data in turn, from the return value to the next then(value => /* handle value */)。

To pass the value to the next Then, return is the key.

Question 29

developeppaer no answer

Promise.resolve('Success!')
  .then(() => {
    throw Error('Oh noes!')
  })
  .catch(error => {
    return 'actually, that worked'
  })
  .then(data => {
    throw Error('The fails!')
  })
  .catch(error => console.log(error.message))

Question 30

codeburst

What are the states of a promise?

Answer 30

Pending
Fulfilled
Rejected

Question 31

codeburst

??Can we use await only with promises?

Answer 31

No, we can use await with promise as well as any object that implements a then function.

const thenable = {
  then: function(callback) {
    setTimeout(() => callback(2), 100);
  }
};

const value = await thenable;
console.log(value); // 2

Question 32

codeburst

What is the output of the following code?

const promise = new Promise((resolve, reject) => {
reject(Error(‘Some error occurred’));
})
promise.catch(error => console.log(error.message));
promise.catch(error => console.log(error.message));

Answer 32

Some error occurred
Some error occurred
You can add multiple handlers (catch, then, and finally) with a single promise.

Question 33

codeburst

How can I write a sleep function using a promise?

Answer 33

function sleep(ms) {
    return new Promise(res => {
        setTimeout(res, ms);
    });
}

Question 34

codeburst

What is the output of the following code?

const promise = new Promise((resolve, reject) => {
reject(Error(‘Some Error Occurred’));
})
.catch(error => console.log(error))
.then(error => console.log(error));

Answer 34

Some error occurred
undefined

The catch function implicitly returns a promise, which can obviously be chained with a then. Since nothing is returned from the catch block, when error is logged in the then block it displays undefined.

Question 35

codeburst

What is the output of the following code?

const promise = new Promise(res => res(2));
promise.then(v => {
        console.log(v);
        return v * 2;
    })
    .then(v => {
        console.log(v);
        return v * 2;
    })
    .finally(v => {
        console.log(v);
        return v * 2;
    })
    .then(v => {
        console.log(v);
    });

Answer 35

2
4
undefined
8

The finally block doesn’t receive any value, and anything returned from finally is not considered in the then block so the output from the last then is used.

Question 36

Какие преимущества и недостатки при использовании промисов вместо колбэков (callbacks)?

Answer 36

Преимущества

Помогает избежать “callback hell”, который может быть нечитаемым.
Упрощает написание последовательного удобочитаемого асинхронного кода с помощью .then().
Упрощает написание параллельного асинхронного кода с помощью Promise.all().
С использованием промисов можно избежать следующих проблем, которые возникают при использовании callback-функций:
Колбэк-функция была вызвана слишком рано
Колбэк-функция была вызвана слишком поздно (или вовсе не была вызвана)
Колбэк-функция была вызвана слишком мало или слишком много раз
Не удалось передать необходимую среду/параметры
Были пропущены ошибки/исключения

Недостатки

Чуть более сложный код (спорно).
В старых браузерах, где не поддерживается ES2015, вам нужно загрузить полифил, чтобы их использовать.

Question 37

epam

What does this return?
const firstPromise = new Promise((res, rej) => {
      setTimeout(res, 500, 'one');
});

const secondPromise = new Promise((res, rej) => {
      setTimeout(res, 100, 'two');
});

Promise.race([firstPromise, secondPromise]).then(res => console.log(res));
A: "one"
B: "two"
C: "two" "one"
D: "one" "two"

Answer 37

When we pass multiple promises to the Promise.race method, it resolves/rejects the first promise that resolves/rejects. To the setTimeout method, we pass a timer: 500ms for the first promise (firstPromise), and 100ms for the second promise (secondPromise). This means that the secondPromise resolves first with the value of ‘two’. res now holds the value of ‘two’, which gets logged. The correct answer is B.

Question 38

epam

What’s the output?
async function getData() {
return await Promise.resolve(‘I made it!’);
}

const data = getData();
console.log(data);
A: "I made it!"
B: Promise {: "I made it!"}
C: Promise {}
D: undefined

Answer 38

Answer
An async function always returns a promise. The await still has to wait for the promise to resolve: a pending promise gets returned when we call getData() in order to set data equal to it.

If we wanted to get access to the resolved value “I made it”, we could have used the .then() method on data:

data.then(res => console.log(res))
This would’ve logged “I made it!”. The correct answer is C.

Question 39

epam

What’s the value of output?
const myPromise = () => Promise.resolve('I have resolved!');

function firstFunction() {
myPromise().then(res => console.log(res));
console.log(‘second’);
}

async function secondFunction() {
console.log(await myPromise());
console.log(‘second’);
}

firstFunction();
secondFunction();
A: I have resolved!, second and I have resolved!, second
B: second, I have resolved! and second, I have resolved!
C: I have resolved!, second and second, I have resolved!
D: second, I have resolved! and I have resolved!, second

Answer 39

With a promise, we basically say I want to execute this function, but I’ll put it aside for now while it’s running since this might take a while. Only when a certain value is resolved (or rejected), and when the call stack is empty, I want to use this value.

We can get this value with both .then and the await keyword in an async function. Although we can get a promise’s value with both .then and await, they work a bit differently.

In the firstFunction, we (sort of) put the myPromise function aside while it was running, but continued running the other code, which is console.log(‘second’) in this case. Then, the function resolved with the string I have resolved, which then got logged after it saw that the callstack was empty.

With the await keyword in secondFunction, we literally pause the execution of an async function until the value has been resolved before moving to the next line.

This means that it waited for the myPromise to resolve with the value I have resolved, and only once that happened, we moved to the next line: second got logged. The correct answer is D.

Question 40

epam

What does this return?
Promise.resolve(5);
A: 5
B: Promise {: 5}
C: Promse {: 5}
D: Error

Answer 40

Answer
We can pass any type of value we want to Promise.resolve, either a promise or a non-promise. The method itself returns a promise with the resolved value (). If you pass a regular function, it’ll be a resolved promise with a regular value. If you pass a promise, it’ll be a resolved promise with the resolved value of that passed promise.

In this case, we just passed the numerical value 5. It returns a resolved promise with the value 5. The correct answer is C.

Question 41

epam

What’s the output?
async function* range(start, end) {
      for (let i = start; i <= end; i++) {
            yield Promise.resolve(i);
      }
}

(async () => {
      const gen = range(1, 3);
      for await (const item of gen) {
            console.log(item);
      }
})();
A: Promise {1} Promise {2} Promise {3}
B: Promise {} Promise {} Promise {}
C: 1 2 3
D: undefined undefined undefined

Answer 41

Answer
The generator function range returns an async object with promises for each item in the range we pass: Promise{1}, Promise{2}, Promise{3}. We set the variable gen equal to the async object, after which we loop over it using a for await … of loop. We set the variable item equal to the returned Promise values: first Promise{1}, then Promise{2}, then Promise{3}. Since we’re awaiting the value of item, the resolved promsie, the resolved values of the promises get returned: 1, 2, then 3. The correct answer is C.