[JavaScript] async/await

비동기 처리의 마지막 부분입니다. async/await을 이해하기 위해서는 앞의 글을 읽고오셔야 이해가 가능할거 같습니다. 어짜피 알아야 하는 내용이니까 한 번씩 읽고 오시는 것을 추천드립니다.   \('_')/

[JavaScript] 비동기 처리

 

[JavaScript] Promise

---

1. async / await

async / await 은 자바스크립트 비동기 처리에서 가장 최근에 나온 방법입니다. 이전에 보았던 콜백 함수와 Promise의 단점을 보완해주는 특징을 가지고 있습니다.

 

먼저, 기본적인 구조를 보겠습니다.

async function 함수명() {
	await 비동기 처리 메서드 명();
}

여기서 비동기 처리 메서드는 Promise 객체를 반환해야 await이 적확히 작동합니다.

 

아래에서는 예제를 통해 사용방법을 알아보겠습니다.

function testFunc() {
	return new Promise(function(resolve, reject) {
    	var Nums = [0, 1];
        resolve(Nums);
    });
}

async function printNum() {
	var result = await testFunc();
    console.log(result);
}

printNum(); // [0, 1]

만약 async / await을 사용하지 않았다면 어떻게 되었을까요? 데이터를 받아온 후에 출력을 하고 싶다면, then을 사용해야 했을 것입니다.

 

간단한 예제를 하나만 더 보겠습니다.

function getUser() {
	var user = {
    	id : 1,
        name : "Kim",
    };
    return new Promise(function(resolve, reject){
    	resolve(user);
    });
}

async function test() {
    var na = await getUser();
    if(na.id === 1) {
    	console.log(na.name);
    }
}

위의 코드에서는 임의로 만든 객체의 id와 name을 가져왔습니다. 이를 응용하면 만들어진 객체가 아닌 json이나 xml 형태의 유저의 정보를 가져올 수 있을 것입니다. 

 

2. async / await 예외처리

async / await 예외처리 방법은 try / catch 입니다. 이번에도 예제로 살펴보겠습니다.

 

function getUser() {
	var user = {
    	id : 1,
        name : "Kim",
    };
    return new Promise(function(resolve, reject){
    	resolve(user);
    });
}

async function test() {
	try{
        var na = await getUser();
        if(na.id === 1) {
            console.log(na.name);
        }
    } catch (error) {
    	console.log(error);
    }
}

 

콜백 함수, 비동기 처리 개념, Promise, async/await 까지 한 번에 이해하기가 쉽지는 않습니다. 그래도 서비스를 하기 위해서는 꼭 필요한 내용이니 공부합시다!! 지금 당장 이해가 안되신 분들은 나중에 본인의 코드에 적용하시면서 다시 공부해 보시는 것을 추천드립니다.

---

참고 문서

자바스크립트 async와 await