본문 바로가기

프론트앤드 수업

[javascript] 비동기적 처리

728x90

자바스크립트 비동기 처리
동기적처리(Synchronous)

비동기적처리(asynchronous)

  1. 콜백함수
  2. Primise
    자바스크립트에서 제공해주는 비동기를 간편하게
    처리할 수 있도록 도와주는 오브젝트.
    기능을 수행하고 나서 정상적으로 기능이 수행되면
    성공의 메세지와 처리된 결과값을 전달
    수행하다가 예상치못한 결과가 생기면 에러를 전달해줍니다.

프로미스 상태
state : promise가 수행중이면 pending
수행이 종료되면 fullfilled
수행중 오류가 발생 rejectd

프로듀서와 컨슈머
프로듀서 : promise 제공
컨슈머 : promise 사용 then catch finaly

promise.then(value=>{
console.log(value);
})
.catch(error=>{
console.log(error);
}).finally(()=>{
console.log('끝났어요')
})

.then - 성공시 실행 / .catch - 실패시 실행 / finally - 항상 실행(잘 사용하지 않음)

이미지파일이나 데이터를 받아오는 도중에 코드가 실행되서 define에러를 방지할 수 있다.

function work(callback) {
            setTimeout(()=>{
                const start = Date.now();
             for(let i =0; i<1000000000; i++){
            }
            const end = Date.now();
            console.log(end-start+'ms');
            callback()
        },0);
        }
        console.log('work호출하기');
        work(()=>{
            console.log('작업이 끝났습니다.')
        });
        console.log('다음 작업');

함수 실행시

1. work 호출하기

2. 다음작업

3. 작업시간

4. 작업이끝났습니다

순으로 호출이된다. 

동기적 처리인 경우에는 다음작업 전에 작업이 끝난 후 처리되지만 비동기적 처리를 이용해 한번에 작업을 실행.

728x90
댓글