210721 동기와 비동기, callback

동기(synchronize)와 비동기(asynchronize)

동기적 처리: 지금 처리하고 있는 일이 끝나면 다음 일을 함.
비동기적 처리: 일이 끝날 때까지 기다리지 않고 다음 일을 처리함.

생활코딩 설명이 너무 기초적인 것이라 이리저리 써치해보다가
[Async, 비동기와 동기] Promise에서 Await까지
async/await를 사용하기 전에 promise를 이해하기
글을 참고했다.

콜백함수

파라미터로 함수를 전달 받아, 함수의 내부에서 실행하는 함수이다.
일단 함수를 넘겨받은 다음에, 나중에 호출(call back)한다.
어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수.라고 할 수 있다.

var a = function(){
  console.log('A');
}
 
 
function slowfunc(callback){
  callback();
}
 
slowfunc(a);

여기서 callback이라는 인자로 콜백함수 a가 넘어가게 된다.
함수를 선언했을 때 동작하는 것이 아니라 slowfunc내에서 함수를 호출했을 때 실행되는 것!

Promise

여러개의 콜백함수가 중첩되면서 나타나는 콜백헬을 해결하기 위해 도입됨.

• 구조가 간단해 가독성이 좋고 반환값을 찾기 쉽다.
• 콜백 함수 안에서 생성된 promise 객체를 활용해 콜백함수가 성공, 실패, 오류 각각의 경우에 따라 후속 처리가 가능하다.
• 순차적이지 않은 비동기함수의 실행순서를 제어할 수 있다.

Promise는 크게 선언부와 동작부로 구성된다.
선언부: promise 객체를 만듦
동작부: 선언된 객체를 호출함

• pending
  new Promise로 Promise가 생성된 직후부터 resolve나 reject가 호출되기 전까지의 순간

• fullfilled
  처리가 완료되어 결과값을 반환한 상태
  만약 비동기 처리함수 값이 성공이라면 resolve 메소드가 호출되고, resolve 메소드의 인자로 설정한, 비동기 함수의 결과값이 전달된다. 이 결과값은 then을 통해 후속 처리된다.

• rejected
  처리에 실패하거나 오류가 발생한 상태

function getFirstUser() {
    return getUsers().then(function(users) {
    //처리가 완료되면 then으로 넘어온 함수의 결과값 전달
        return users[0].name;
    }).catch(function(err) {
    //에러 처리
        return {
          name: 'default user'
        };
    });
}

getUsers()는 promise를 리턴하므로, 우리는 기다릴(await) 수 있다.
같은 코드를 await을 사용해 표현하면 이렇게 된다.
콜백함수를 사용하지 않고, try/catch로 에러를 처리함.

async function getFirstUser() {
    try {
        let users = await getUsers();
        return users[0].name;
    } catch (err) {
        return {
            name: 'default user'
        };
    }
}