비동기 & 동기 (JS)

Callback 함수

비동기 작업을 동기적작업을 하기위해 사용된다.

(비동기는 웹사이트의 빠른 페이지 로딩을 위해 사용된다.)

function startGame(name,callback){
	const nickname = name;
	game(name);
}

function game(name){
	... //game
}

startGame('lee',game);

// 매개변수로 함수를 받거나 return으로 함수를 반환하는 **고차함수**를 사용

Promise

비동기 함수의 결과를 담고있는 객체

Callback함수를 계속적으로 사용할 수는 없기에(가독성) 대신사용 가능한 동기작업.

3가지 상태

• 대기(Pending): 비동기 함수가 아직 시작하지 않은 상태
• 성공(Fulfilled): 비동기 함수가 성공적으로 완료된 상태
• 실패(Rejected): 비동기 함수가 실패한 상태

상태가 바뀌면 then() , catch() 를 사용해 성공, 실패에 대한 처리가 가능 (try,catch)

다만, then() 를 연속적으로 이어서 사용하면 콜백체인과 마찬가지이기에,

asynx / await

콜백, Promise의 단점을 보완할 수 있는 문법.

async는 함수네임의 앞부분에 사용하고 await는 async함수 내부에서만 사용이 가능하다.

이때, async함수는 return값이 Promise객체가 아니더라도, 그 값을 Promise객체에 넣어서 반환한다. 즉, async의 모든 반환값은 Promise 객체이다.

await과 then() 같은 역할이지만, 콜백함수를 등록하거나 체인을 형성할 필요가 없다.

async와 await을 사용할때는 try,catch를 사용해서 실패상태에 대한 작업을 하면된다.

//getNetworkData 라는 Promise반환 함수가 있다고 가정.

getNetworkData({id:'1234',name:'lee'})
.then((data)=>{//성공작업})
.then((data)=>{//이후 작업})
.then((data)=>{//이후 작업...})
.catch((error)=>{//실패작업});

//async,await를 사용시

async function asyncAwait() {
      try {
        const networkData= await getNetworkData({id:'1234',name:'lee'});
        // 성공작업
        //이후 작업
        //이후 작업...
      } catch (error) {
        // 실패작업
      }
    }