Javascript

비동기식 javaScript

이거시원조랑께 2023. 11. 13. 00:41
반응형

272. WebAPI와 단일 스레드

자바 스크립트는 한줄 한줄 처리하는 방식을 가지고 있다.

그렇다면 데이터를 가져오는 것과 같이 시간이 걸리는 작업이 중간에 끼어있다면 그 다음 작업까지 아무것도 하지 못하는 것일까?

그렇지 않다.(이러한 방식으로 진행된다면 아무도 사용하지 않을 것이다)

여기에서는 두가지 방법이 있는데
첫번째는 브라우저에 함수로 직접 일을 처리하는것이고
두번째는 필요한 작업이 끝나면 브라우저가 자바 스크립트에게 함수를 실행하라고 알려주는것이다(함수를 전달,콜백)

273. callback 지옥

콜백이 필요한 작업을 하다보면 (1단계가 끝나면 2단계를 실행하고 2단계가 끝나면 3단계를 실행하는 것처럼) 개발자가 무수히 중첩된 콜백 안에 콜백을 만나게 되는데 이를 콜백 지옥이라한다. 콜백 지옥의 문제점은 가독성이 떨어지고 문제가 생겼을경우 어디서부터 손을 대야할지 모르게 된다는 것이다.
이걸 해결하기 위해서 promise를 알고 사용해야한다.

275 promise

콜백 지옥을 해결하기 위해서는 promise 객체를 반환하는 함수를 만들어서 실행시키면 된다

promise객체는 pending(진행중) , resolved(성공), rejected(실패) 세가지 상태를 가지는데, promise 객체 내부에서 성공적으로 진행되면 resolved 상태로 전환되며 then() 내부로 데이터를 넘기며 실행시키고, 오류가 발생하면 rejected 상태로 전환되며 catch() 내부로 오류를 넘기며 실행시킨다

즉, 함수가 실행되고 그 다음 단계(중첩)로 진행하고 싶으면 promise 객체에 .then()을 사용하면 되고 오류를 알기위해서 .catch()에 오류를 출력시키면 된다(ex: console.log(err))

이러면 기존의 콜백지옥과 다른게 무엇인가?(약간의 가독성 증가?)

그렇다 별로 다른것이 없다 그래서 여기서 마법이 등장하는데 바로 return이다

.then() 내부 마지막에 return으로 그 다음 단계의 함수를 반환해주면 그 then()문이 실행되고나서 promise 객체를 반환해주기 때문에 then() 내부가 아닌 외부에 또 then()을 사용할 수가 있게된다

makesomething(data)
.then(function)
.then(function)
...
.catch(function)

반응형