우리가 페이지네이션이 적용되어있는 리스트를 보았을때, 분명 2페이지를 클릭한다음 4페이지를 클릭하였는데 응답 순서가 뒤바뀌어 나오는 경우나 연속적으로 검색어를 변경하였는데 원하지 않는 결과가 나오는 경우도 볼수있다.
이러한 문제점을 해결할수 있는 비동기 작업을 도와주는 방법이 있다

Promise 방식

const promise = new Promise(resolve => {
  setTimeout(() => {
    resolve("Hello from a Promise!");
  }, 2000);
});

promise.then(value => console.log(value));

Observable 방식

const observable = new Observable(observer => {
  setTimeout(() => {
    observer.next('Hello from a Observable!');
  }, 2000);
});

observable.subscribe(value => console.log(value));

Promise

위의 코드를 보면 Promise는 하나의 값에 대해 resolve 하거나 reject한다.
대신 하나의 값에 대해서만 async 비동기 처리를 하는 모습을 볼 수 있다.
한번 완료된 async한 값을 resolve하고나면 더 이상 사용이 불가능하고 취소할 수가 없다.
그래서 async/await를 계속 반복해서 써야하는데 이를 해결하기위해 Promise.All이라는 것을 쓸수있다.

const onClickPromiseAll = async () => {
        console.time("시작")
        // const results = ["철수", "영희", "훈이"]
        const results = await Promise.all([
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("철수")
                }, 3000)
            }),
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("영희")
                }, 1000)
            }), 
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("훈이")
                }, 2000)
            })
        ])
        console.log(results)
        console.timeEnd("시작")
    }

이런식으로 async/await을 반복해서 쓰는게아니라 한번의 async/await으로 promise를 활용할 수 있다.

Observable

Observable은 Promise를 개선하여 나온건데, Promise와는 반대로 asynchronous 값들을 emit할 수 있다. 즉 다수의 값, 이벤트 스트림을 다루기 위해 사용된다.