1. Promise
  2. Async & Await

Promise

Promise개체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.
일단 콜백지옥을 해결하기 위해 탄생!
언젠가 끝나는 작업의 결과값을 담는 통과 같은 객체

  • Promise생성자는 콜백을 인수로 받습니다. 2가지값이 인수로 들어옵니다.
    • resolve 인수로 준값이 Promise 객체의 결과값
    • reject 비동기 작업에서 에러가 발생했능 때 호출하는 함수
  • then메소드를 통해 콜백을 등록해서, 작업이 끝났을 때 결과값을 가지고 추가 작업
    • then메소드 자체도 Promise객체를 반환, 콜백에서 반환한 값이 곧 Promise의 결과값
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function delay(ms, vaule) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(vaule); //resolve에 인수로 준 값이 promise 객체의 결과값
    }, ms);
  });
}
// delay는 promise 통을 반환하는 함수
// ms밀리세컨드의 시간이 지난후 value를 반환
// delay함수를 호출하면 1초 뒤에 "hello"가 채워진 통을 반환
delay(1000, "hello")
  .then(str => {
    // 위의 반환값이 then의 인수(str)에 들어간다.
    return delay(2000, str + "ria"); // str에 위의 반환값("hello")가 들어간 상태로 다시 함수가 실행, 이떄의 결과값 ("hello ria")가 채워진 통이 반환
  })
  .then(str => {
    // 위에서 반환된 값이 then의 인수(str)에 들어간다.
    console.log(str);
  });
  1. 함수를 호출하고 1초 뒤에 ‘hello’가 채워진 통의 반환
  2. 반환된 값을 이용해 콜백함수가 실행
  3. 2초 뒤에 ‘hello ria’가 채워진 값이 반환
  4. ‘hello ria’가 콘솔창에 출력
1
2
3
4
5
6
7
8
9
// axios로 통신
axios
  .get(`${API_URL}/repos/facebookincubator/create-react-app/issues?per_page=5`) // 해당 주소에 get요청을 보내고 받은 데이터의 결과값이 담긴 통이 반환된다.
  .then(res => {
    // 받은 데이터가 res에 담긴다
    res.data
      .map(issue => issue.title)
      .forEach((title, index) => console.log(index + 1 + " : " + title));
  });

Async & Await

Async

함수 앞에 async을 붙이면 비동기함수
비동기함수는 항상 promise 객체를 반환한다.

Await

  • 비동기 함수내에서 사용
  • await뒤에 오는 Promise가 결과값을 가질때 함수를 잠시 멈추고, Promise 통에 값이 채워지면 함수를 다시 실행하여 값을 반환
  • await 연산자이면서 값을 변수에 저장 가능
  • await 연산의 결과값은 뒤에 오는 Promise 객체의 결과값
  • 제어구문에서 사용 가능
  • 동기식 코드를 짜듯이 비동기식 코드를 짤수 있어서 코드가 간략
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 비동기 함수
async function func1() {
  //...
}

// 비동기 화살표 함수
const func2 = async () => {
  //...
};

// 비동기 메소드
class MyClass {
  async myMethod() {
    //...
  }
}