В настоящее время мы используем асинхронное ожидание в ES2017 или ES8 и node js ≥ 8.x.
Если вы хотите узнать о ECMAScript, его связи с JavaScript, сведениях о его версии и т. д., перейдите по следующим ссылкам.
Зачем нам обещание тогда в JavaScript
По умолчанию JavaScript или node js являются неблокирующим вводом-выводом и асинхронными.
Чтобы узнать об основной архитектуре JavaScript или node js, прочитайте следующий блог.
Согласно базовой архитектуре JavaScript или node js, он использует цикл событий для обработки в фоновом режиме как однопоточный язык.
Предположим, если мы вызываем API и нам нужно получить результаты. Основываясь на результатах, только если мы сможем выполнять дальнейшие функции, нам нужно обещание.
Например, давайте возьмем следующий фрагмент кода, чтобы объяснить обещание, а затем использовать fetch API в основном javascript.
callApi() {
return new Promise( (resolve,reject) =› {
this.$http.get( “‹api_url›” ).then( (response) =› {
разрешить(ответ)
}).catch(error=›{
отклонить(ошибка)
})
})
}
processData(данные) {
//здесь идет логика…
}
submit() {
callApi().then(response =› {
let data = response.data
processData(данные)
}).catch( error =› {
console.log(error)
})
}
Отправить()
Цель асинхронного ожидания
В приведенном выше фрагменте кода я использовал axios npm для выполнения http-вызовов в vue js. В приведенном выше примере используется обещание. Но каждый раз, когда нам нужно обещание, а затем для выполнения вызовов API или длительного процесса, такого как взаимодействие с базой данных в узле js. Если мы используем множество обещаний, то логика всегда будет внутри блока или даже на втором уровне, а затем в блоке.
Блочное кодирование с использованием обещаний затрудняет понимание логики вызовов API и сложности в обслуживании.
Чтобы избежать сложностей с блочным кодированием, в игру вступает асинхронное ожидание.
Как использовать асинхронное ожидание
Ключевое слово Async следует использовать перед именем функции, в которой будет выполняться вызов API. И перед функцией вызовов API нужно упомянуть ключевое слово await для ожидания результата.
Например, давайте возьмем предыдущий пример с асинхронным ожиданием вместо обещания.
callApi() {
return new Promise( (resolve,reject) =› {
this.$http.get( “‹api_url›” ).then( (response) =› {
разрешить(ответ)
}).catch(error=›{
отклонить(ошибка)
})
})
}
processData(данные) {
//здесь идет логика…
}
async submit() {
try {
let response = await callApi()
let data = response .data
processData(данные)
} catch(ошибка) {
}
}
Отправить()
Полифилл для асинхронного ожидания
Если версия браузера или узла js не поддерживает асинхронное ожидание, мы можем использовать любую из следующих библиотек полифилла.
В обеих нодах js ‹ 8.x и ES ‹ 8 мы тогда использовали промис. Как я уже упоминал, если нам нужно использовать async await в браузерах, поддерживаемых node js ‹ 8.x и ES ‹ 8, нам понадобится любая из трех вышеуказанных библиотек полифилла.
Когда мы можем использовать асинхронное ожидание
Для следующих сценариев мы можем использовать асинхронное ожидание.
- Всякий раз, когда нам приходится обрабатывать данные, поступающие из ответа API, мы можем использовать асинхронное ожидание.
- Всякий раз, когда сервер API взаимодействует с базой данных, мы можем использовать асинхронное ожидание.
Когда мы не используем асинхронное ожидание
- Если нам не нужен ответ API для следующей строки вызова API, нам не нужно использовать асинхронное ожидание.
- Если нам нужен ответ первого вызова API на второй вызов API, мы можем использовать асинхронное ожидание.
- Если мы делаем 3 вызова API и нам не нужны ответы от этих трех для следующей строки вызовов API, нам не нужно использовать асинхронное ожидание.
- Если мы делаем 3 вызова API и нам нужно вызвать функцию после выполнения 3 вызовов API, нам не нужно использовать асинхронное ожидание. Вместо этого мы можем использовать Promise.all().
Пример Promise.all()
callApi(api_url) {
return new Promise( (resolve,reject) =› {
this.$http.get(api_url).then( (response) =› {
resolve(response )
}).catch(error=›{
reject(error)
})
})
}
processData(data) {
//здесь идет логика…
}
async submit() {
try {
let promise1 = callApi( «‹api_url1›»)
let promise2 = callApi("‹api_url2›"" )
let promise3 = callApi( "‹api_url3›"" )
let responses = await promise.all([promise1, promise2, promise3])
let ids = []
for(let i=0;i‹responses.length;i++) {
ids.push(responses[i].data.id)
}
processData( ids )
} catch( error ) {
}
}
submit()
Заключение
До сих пор в этом блоге мы видели обещания, асинхронное ожидание, историю версий es, базовую архитектуру javascript/node js и т. д.
Пожалуйста, используйте асинхронное ожидание осторожно. Пожалуйста, поймите концепцию асинхронного ожидания, прочитав этот блог и содержимое внешних ссылок.
Прежде чем использовать асинхронное ожидание, прочтите разделы «Когда мы не используем асинхронное ожидание» и «Примеры Promise.all()» в этом блоге.
Если у вас есть какие-либо вопросы, пожалуйста, не стесняйтесь присылать мне свои вопросы, вопросы и предложения по адресу [email protected].
Спасибо.
