자바스크립트 비동기 처리

비동기 처리

  • 순차적으로 태스크를 처리하는 것이 아니라 태스크가 종료되지 않아도 다른 태스크를 처리할 수 있도록 하여 빠르게 처리 할 수 있도록 도와주는 방법

문제

  • 비동기 처리 경우, 비동기 함수가 처리 후에 실행되어야 하는 경우가 발생.

해결방법

1. 콜백 함수

  • 하나의 방법은 인자로 콜백함수를 전달하여, 비동기가 끝난 후에 콜백함수 실행하여 처리한다.
  • 단점 : 콜백 함수가 여러개 있을 때에는 콜백 함수 내 콜백 함수가 존재하여 콜백 지옥에 빠질 수 있다.

2. Promise

  • 비동기 처리를 위한 객체
  • 프로미스의 3가지 상태

    • Pending: 비동기 처리 로직이 아직 완료되지 않은 상태
    • Fulfilled: 비동기 처리 완료시 결과 값을 반환 상태
    • Rejected: 비동기 처리가 실패한 상태
  • Pending : 호출시 대기 상태 된다.
new Promise(function(resolve, reject) {
});
  • Fulfilled : resolve 실행시 이행 상태가 된다. then에서 resolve()을 보내면 then내 function의 input으로 받는다.
function getData() {
  return new Promise(function(resolve, reject) {
    resolve(data)
  })
}

getData().then(function(resolvedData) {
  console.log(1);
})
  • Rejected : reject 호춯시 실패 상태가 된다. then에서 reject()을 호출하면 catch내 function의 input으로 받는다.

    function getData() {
    return new Promise(function(resolve, reject) {
    reject(new Error());
    })
    }

getData().then().catch()

- Promise Chaining : then이 호출되면 새로운 프로미스 객체가 반환된다.

### 3. async와 await
- 프로미스를 좀 더 사용할 수 있다.

- async 함수 : 함수를 프라미스로 변형해준다.
```javascript
async function f() {
  return 1;
}
  • await : 프라미스와 같이 사용하면 처리될 때까지 기다린다.

    let result = await new Promise(resolve, reject)

Written by@WHALE
Fun Coding

GitHubFacebookLinkedIn