[JavaScript] async / await 1

async / await 왜 사용할 까?

• Promise 체이닝은 콜백 지옥을 벗어나게 했지만, Promise 체이닝 또한 길어질 경우 여전히 가독성이 떨어짐
• ES2017에 처음에 등장한 async, await는 syntactic sugar로 Promise 사용을 좀 더 편리하고 세련되게 편리하게 할 수 있도록 처리
• async 키워드는 함수 앞에 붙임
• 함수 앞에 async 붙게 되면 promise를 반환한다는 의미

async/ await

• 프로미스를 기반으로 동작
• 프로미스의 then/catch/finally 후속 처리 메서드에 콜백 함수를 전달해 비동기 처리 결과를 후속 처리할 필요 없이 동기 처리처럼 프로미스를 사용

async함수

• await 키워드는 반드시 async 함수 내부에서 사용
• async 함수는 async 키워드를 사용해 정의하며 언제나 프로미스 반환
• async 함수가 명시적으로 프로미스를 반환하지 않더라도 async 함수는 암묵적으로 반환값을 resolve 하는 프로미스 반환

//async 함수 선언문
async function foo(n) {return n}
foo(1).then(v=>console.log(v)) // 1

//async 함수 표현식
const bar = async function(n) {return n}
bar(2).then(v=>console.log(v)) // 2

//async 화살표 함수
const baz = async n=>n
baz(3).then(v=>console.log(v)) //3

//async 메서드
const obj = {
	async foo(n) {return n }
}
obj.foo(4).then.(v=>console.log(v)) //4

//async 클래스 메서드
class MyClass{
	async bar(n) {return n}
}
const myClass = new MyClass()
myClass.bar(5).then(v=>console.log(v)) //5


class MyClass{
	async constructor(){
	//SyntaxError:Class constructor may not be an asyn method
}
const myClass = new MyClass()

await 키워드

• 프로미스가 settled 상태(비동기 처리가 수행된 상태)가 될 때 까지 대기
• settled 상태가 되면 프로미스가 resolve한 처리 결과를 반환
• await 키워드는 반드시 프로미스 앞에서 사용

const fetch = require('node-fetch')
const getGithubUserName = async id => {
	const res = await fetch(`https://api.github.com/users/${id}`)
	const {name} = await.res.json()
	cosole.log(name)
}
getGithubUserName('iseo')

Reference

async와 await async / await 1