async/await
목차
1. async
2. await
3. async/await
asynchronous programming
1. Ajax call return data
2. webcam access request
3. image processing
WE GET IT
PROMISE ARE GREAT
PROMISE IS FOREVER
// callback
moveTo(50, 50, function() {
moveTo(20, 100, function() {
moveTo(100, 200, function() {
moveTo(2, 10, function() {});
});
});
});
// Promise
moveTo(50, 50)
.then(() => moveTo(20, 100))
.then(() => moveTo(100, 200))
.then(() => moveTo(2, 10));
// async/await
async function animate() {
await moveTo(50, 50);
await moveTo(20, 100);
await moveTo(100, 200);
await moveTo(2, 10);
}
async
function yesno(params) {
return axios("https://yesno.wtf/api");
}
async function qustion() {
try {
var qustion = await yesno("이번 발표가 성공할까요");
console.log(qustion.data.answer);
document.body.innerText = qustion.data.answer;
} catch (error) {
console.error(error);
}
}
qustion();
function myFunction() {
return "myFunction";
}
async function myAsync() {
return "myAsync";
}
console.log(myFunction());
console.log(myAsync());
async 요약
- async 키워드는 ES2017(ES8)
- 함수 앞에 async를 넣는 것으로 만들수 있음
- async 함수는 promise를 반환한다.
- async 함수의 안에서는 동기적인 메소드가 아니여도 동기적으로 쓸 수 있다.
async Reject?
async function myAsyncReject() {
throw "myAsyncReject";
}
myAsyncReject().catch(error => {
console.error(error);
});
async function myAsyncReject2() {
await Promise.reject(new Error("myAsyncReject2"));
}
myAsyncReject2().catch(error => {
console.error(error);
});
await
function myAwait() {
await "myAwait"
}
myAwait();
await 요약
- async 함수 안에서만 유효하다.
- await는 async 함수의 실행을 잠시 멈추고 Promise를 해결하기를 기다린 다음 async 함수를 다시 시작함
- 일시 정지 버튼
1. 오류 처리
const makeRequest = () => {
return callAPromise()
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => {
throw new Error("oops");
})
}
makeRequest()
.catch(err => {
console.log(err);
// output
// Error: oops at callAPromise.then.then.then.then.then (index.js:8:13)
})
const makeRequest = async () => {
await callAPromise()
await callAPromise()
await callAPromise()
await callAPromise()
await callAPromise()
throw new Error("oops");
}
makeRequest()
.catch(err => {
console.log(err);
// output
// Error: oops at makeRequest (index.js:7:9)
})
2. 분기처리
const makeRequest = () => {
return getJSON()
.then(data => {
if (data.needsAnotherRequest) {
return makeAnotherRequest(data)
.then(moreData => {
console.log(moreData)
return moreData
})
} else {
console.log(data)
return data
}
})
}
const makeRequest = async () => {
const data = await getJSON()
if (data.needsAnotherRequest) {
const moreData = await makeAnotherRequest(data);
console.log(moreData)
return moreData
} else {
console.log(data)
return data
}
}
3. 스택프레임
function loadData() {
return callAPromise()
.then(callback1)
.then(callback2)
.then(callback3)
.then(() => {
throw new Error("boom");
})
}
loadData()
.catch(function(e) {
console.log(err);
// Error: boom at callAPromise.then.then.then.then (index.js:8:13)
});
async function loadData() {
await callAPromise1()
await callAPromise2()
await callAPromise3()
await callAPromise4()
await callAPromise5()
throw new Error("boom");
}
loadData()
.catch(function(e) {
console.log(err);
// output
// Error: boom at loadData (index.js:7:9)
});
async/await
By leejaemin
async/await
- 444