10-3 비동기처리 - async/await
Intro
callback, Promise 보다 개선된 방식으로 비동기 처리를 도와주는 async/await !
🔵 Promise를 통한 비동기 코딩의 문제
function fetchAuthorName(postId) {
return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
.then((response) => response.json())
.then((post) => post.userId)
.then((userId) => {
return fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
.then((response) => response.json())
.then((user) => user.name)
})
}
fetchAuthorName(1).then((name) => console.log("name:", name))
//결과
// name: Leanne Graham
callback, Promise 보다 개선된 방식으로 비동기 처리를 도와주는 async/await !
function fetchAuthorName(postId) {
return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
.then((response) => response.json())
.then((post) => post.userId)
.then((userId) => {
return fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
.then((response) => response.json())
.then((user) => user.name)
})
}
fetchAuthorName(1).then((name) => console.log("name:", name))
//결과
// name: Leanne Graham
메서드 체이닝 기법으로 비동기 처리를 하면 다음과 같은 문제가 발생합니다.
- 디버깅
어떤then
에서 에러가 났는 지 확인하는 게 매우 어려움. - 예외처리
Promise
를 사용하면catch()
를 통해 예외처리를 해야합니다. 이 부분이 비동기코드와 동기코드가 섞여 있으면 문제를 발생하기 쉽습니다. - 들여쓰기
결국은 중첩, 병렬이 들어가다보니 가독성이 떨어지게 됩니다.
🔵 async/await 키워드를 통한 비동기코딩
ES&에서 async/await 키워드가 추가되었습니다! 비동기코드를 마치 동기코드처럼 보이게 작성할 수 있어요!
async function fetchAuthorName(postId){
const postResponse = await fetch(
`https://jsonplaceholder.typicode.com/posts/${postId}`
)
const post = await postResponse.json()
const userId = post.userId
const userResponse = await fetch(
`https://jsonplaceholder.typicode.com/users/${userId}`
)
const user = await userResponse.json()
return user.name
}
fetchAuthorName(1).then((name) => console.log('name:',name))
//결과
// name: Leanne Graham
함수선언부에 async
키워드가 있습니다. 그리고 Promise를 리턴하는 모든 비동기 함수 호출부 앞에는 await
키워드가 있습니다. 비동기처리처럼 바로 실행이 다음라인으로 넘어가지 않고 결과값을 얻을 수 있을 때까지 기다립니다.
➡ 따라서 동기코드처리와 동일한 흐름으로 코드를 작성할 수 있습니다.
예외처리
async function fetchAuthorName(postId) {
const postResponse = await fetch(
`https://jsonplaceholder.typicode.com/posts/${postId}`
)
const post = await postResponse.json()
const userId = post.userId
try {
const userResponse = await fetch(
`https://jsonplaceholder.typicode.com/users/${userId}`
)
const user = await userResponse.json()
return user.name
} catch (err) {
console.log("Faile to fetch user:", err)
return "Unknown"
}
}
fetchAuthorName(1).then((name) => console.log("name:", name))
동기/비동기 상관없이 try/catch
로 일관되게 예외 처리를 할 수 있는 부분도 async/await
를 사용했을 때의 이점입니다!!
Author And Source
이 문제에 관하여(10-3 비동기처리 - async/await), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hsngju/JS-10-3-비동기처리-asyncawait저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)