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

Подумайте, как работает ресторан. Представьте, если бы каждый официант ждал только 1 столик за раз? Очереди будут длиннее, поскольку столиков и мест будет меньше, и люди начнут жаловаться на долгое время ожидания. Их не зря называют официантами. Они должны ждать вас.

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

Другой пример из реальной жизни

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

Теперь, когда у вас есть достойное понимание логики обещаний, теперь давайте начнем с написания базового кода, с которым вы можете поиграть, чтобы увидеть его в действии!

let promise = new Promise( ( resolve, reject ) => { } )

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

let promise = new Promise( (resolve, reject) => {
    let evenNumber = 1+1;
    if( evenNumber % 2 == 0 ){
        resolve( 'Success' )
    else { 
        reject( 'Failed' )
    }
})

В этом примере выше, resolve и reject принимает строковый параметр, который отправляет сообщение на консоль или куда вы хотите его поместить. Вы действительно сможете понять это более подробно на следующих примерах.

promise.then( message => {
    console.log( message )
}).catch( message => {
    console.log( message )
})

Сообщение может быть любым. Это может быть скрыто или показано конечному пользователю в зависимости от того, какое приложение вы создаете.

Вот еще один пример симуляции реальной проблемы.

let userLeft = true;

function isLoggedIntoServer(){
    return new Promise( (resolve, reject) => {
        if( !userLeft ){
            resolve( "User is still logged into the server" )
        } else {
            reject( "User has left the server :(" )
        }
    })
}
isLoggedIntoServer( )
.then( message => { console.log(message) } )
.catch( message => { console.log(message) } )

В этом примере вы можете видеть, что «then» или «catch» будут выполняться после того, как isLoggedIntoServer () будет называется. Catch отправит вам сообщение об ошибке, а затем сообщит об успешном выполнении. Еще раз, сообщение может быть любым, как вам нравится.

Попробуйте изменить userleft переменную на false и посмотрите, что вы получите. Довольно круто, да? Лучше, чем писать кучу функций обратного вызова!

Что делать, если у вас есть несколько обещаний? Например, на сервер загружается несколько видео. Для этого мы можем использовать Promise.all. Promise.all принимает аргумент, который представляет собой массив обещаний. См. Пример ниже

const userVideoUpload1 = new Promise( ( resolve, reject ) => {
    setTimeout( ( ) => {
        resolve( 'Video 1 has been uploaded' )
    }, 5000)
});
const userVideoUpload2 = new Promise( ( resolve, reject )  => {
    setTimeout( ( ) => {
        resolve( 'Video 2 has been uploaded' )
    }, 1000)
})
const userVideoUpload3 = new Promise( ( resolve, reject ) => {
    setTimeout(( ) => {
        resolve( 'Video 3 has been uploaded' )
    }, 10000)
});
Promise.all( [userVideoUpload1,userVideoUpload2,userVideoUpload3] )
.then( message => { 
    console.log( message )
});

Если нет оператора отклонения, по умолчанию обещание разрешится само. Обратите внимание на наличие нескольких функций тайм-аута. У каждого из них разные временные интервалы. Promise.all отобразит сообщение в консоли после выполнения последнего обещания (самого долгого).

Очень просто. С надеждой.

И если вы этого не понимаете, это прекрасно! Просто потренируйтесь и разбейте все, что вы не понимаете, на части и проведите собственное исследование, чтобы выяснить, что вам нужно знать. Освоив обещания, вы можете полностью погрузиться в «await and async» javascript.