Привет! Это Кристофер. Некоторое время я избегал этой темы из-за страха. Ха-ха, мне нравится признавать свои слабости, так что это тоже может помочь вам! Обещания используются в асинхронном 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.