최고의 비동기식 솔루션 Async-await
14190 단어 프런트엔드
정의
Async function
선언은 AsyncFunction 객체를 반환하는 비동기 함수를 정의하는 데 사용됩니다.비동기 함수는 이벤트를 통해 비동기적으로 실행되는 함수를 가리키며, 은식Promise
을 통해 결과를 되돌려줍니다.function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
async function asyncCall() {
console.log('calling');
var result = await resolveAfter2Seconds();
console.log(result);
// expected output: 'resolved'
}
asyncCall();
설명:
Async
함수를 호출할 때 Promise
대상을 되돌려줍니다.Async
가 값을 되돌릴 때Promise
의 resolve
방법은 이 값을 전달하는 것을 책임진다(전문에 대응하는 프로미스 대상을 되돌려준다). Async
함수가 이상을 던질 때Promise
의 reject
방법도 이 이상을 전달한다.await
async
함수에는 await
표현식이 있을 수 있습니다. 이로써 async
함수는 실행을 멈추고 표현식Promise
의 실행이 끝난 후에야 계속 실행async
함수를 실행하고 해결 결과를 되돌려줍니다.*
await
키워드는 async
함수에서만 사용할 수 있습니다.var resolveAfter1Second = function() {
return new Promise(resolve => {
setTimeout(function() {
resolve(10);
console.log("fakin ");
}, 1000);
});
};
var sequentialStart = async function() {
const fast = await resolveAfter1Second();
console.log(fast)
}
sequentialStart()
설명: 먼저 일반적인
resolveAfter1Second
함수를 정의했고 되돌아오는 것은 promise
이다. 이 promise
내부에서 1초 후에 출력('fakin 실행 완료')을 한 다음에 sequentialStart
이 async
함수에서 중요한 글자를 사용하여 이 일반await
함수를 일시 정지한다.이 resolveAfter1Second
함수 코드가 async
줄에 실행될 때 전체 함수는 const fast = await resolveAfter1Second();
가 실행되기를 기다리고 결과를 되돌려줍니다 resolveAfter1Second()
await 고려 사항console.log(fast)
와 await
를 혼동하지 마세요. 동시Promise.then
두 개 혹은 더 많은 await
대상을 원한다면 Promise
를 사용해야 합니다.Async 진급(Promised 호출 체인 재작성)
두 함수를 먼저 정의합니다.
let _fakin = function(){
return new Promise((resolve,reject)=>{
setTimeOut(()=>{
console.log('fakin')
},1000)
resolve(10)
})
}
let _errFakin =function (){
return new Promise((resolve,reject)=>{
setTimeOut(()=>{
console.log(' ')
},1000)
resolve(10)
})
}
위에서 두 가지 함수를 정의했는데 각각 성공과 실패를 하나의 표준 버전
Promise.then
으로 되돌려준다Promise
function fakin(){
return new Promise((resolve,reject)=>{
// do something
}).catch(e=>{
return _fakin().then(res=>{
// do something
})
}).then(res=>{
return _errFakin().then(res=>{
// do something
})
})
}
만약 기능이 갈수록 복잡해진다면, 매우 많을 것이다
Promise
then
버전 Async
async function fakin(){
let v;
try{
v= await _fakin()
} catch(e){
v = await _errFakin(e);
}
return processDataInWorker(v)// await , async Promise
}