[js] async와 await 개념

<비동기 처리방식>

자바스크립트는 싱글 스레드 프로그래밍 언어이기에 비동치 처리가 기반입니다.

비동기 처리는 그 결과가 언제 반환될지 알 수 없기에 동기식으로 차리 하는 기법들이 사용되어야 합니다.

대표적인 동기식 처리 방식은 callback, promise 등이 있습니다.

 

async와 await를 사용하는 가장 큰 이유는 사용법이 간단하다는 것입니다.

 

 

<promis>

 

function p() {
return new Promise((resolve, reject) => {
	resolve('life is short');
    });
    }
    
p().then((n) => console.log(n));

 

<async>

async function p() { //asyuc 지정시 Promise를 리턴하는 함수로 만들어줌
	return 'life is short';
    }
    
    p2().then((n) => console.log(n));

promis와 asyuc코드를 비교해보 ansync 코드가 조금 더 간략한 것을 볼 수 있습니다.

 

이처럼 async를 사용하면 promise 코드를 조금 더 직관적으로 나타낼 수 있습니다.

함수에 async만 붙이면 자동으로 promise 객체로 인식됩니다.

 

async & await 예외 처리!!!!!

async , await에서 예외를 처리하는 방법은 바로 try catch입니다.

에러 처리를 위해. catch()를 사용할 수 있는데 이처럼 async에서는 catch {}를 사용하시면 됩니다. 

 

anync function logTodotutle(){
try {
var user = await fetchUser();
if(user.id ===1){
	var todo = await fetchTodo();
    console.log(todo.title);
    }
    }
    catch(error) {
    console.log(error);

 

 

<여러 가지 기본 예제>

1. async

[Hi 출력]

async function greet() {
	return 'Hi';
    }
    
   greet().teen(console.log);

 [명시적 resolved premise 반환 (Hi 출력)]

async function greet() {
	return Promise.resolve('hi');
    }
    
    greet().then(console.log);

 

function 앞에 async를 선언한 함수는 항상 promise 객체를 반환합니다.

promise가 아닌 다른 값을 리턴하더라도 내부적으로 Promise를 감싸 리턴하게 됩니다.

 

2.await

 

function freet(){
	return new Promise(function(resolve){
    	setTimeout(function() {
    		resolve('hi');
            {; 1000);
            
   });
}

(async function() {
	var result = await greet(); //resolved 될때 까지 대기함
    console.log(result);
    })();

앞에  async / await 키워드만 붙여주면 비동기 작업의 순차 처리가  -- > 일반 순차 프로그래밍과 동일하게

 

promise.then을 사용하는 것보다 간결하고 가독성도 뛰어납니다.

 anync로 선언된 함수 안에서만 사용가능 하며 await 키워드를 사용하더라도 그 작업이 처리되는 동아 다른 모든 프로세스가

중단되는 것은 아닙니다.