[자바스크립트(Java Script)] 비동기 간단 예제

1. 비동기 

소스 코드 기본적으로 위에서 부터 순차적으로 진행된다.

 

하지만, 비동기는 위의 소스코드가 먼저 실행되지 않는다는 것을 보여준다.

 

콜백 함수에서 사용했던 setTimeout 함수가 비동기 함수이다. (바로가기 : [자바스크립트(Java Script)] 콜백 함수)

 

setTimeout 함수를 보면서 비동기를 이해하도록 하자

 

소스 코드

setTimeout(function () {

console.log("3초 후에 출력됩니다.");

}, 3000);

console.log("바로 실행됩니다.");

결과

동기로 실행되었다면, "3초 후에 출력됩니다"의 로그가 먼저 작성되고 "바로 실행됩니다." 가 작성될 것이다.

하지만, 위의 결과를 보면 "바로 실행됩니다."가 먼저 실행된 것을 볼 수 있다. 

이는 setTimeout함수가 비동기함수이기 때문이다. 

이처럼 비동기 함수를 사용하면, setTimeout함수가 완료 되기 전에 다음 로그를 실행 시킬 수 있다. 

 

2. Promise 객체 

비동기 처리를 지원해 주는 promise 객체를 사용해보자.

 

promise 객체는 then, catch를 사용 할 수 있다. 

then : 정상적으로 실행이 끝난 후 실행

catch : 비정상, 에러가 났을 때 실행

 

대표적은 promise 객체는 fetch 함수가 있다.

 

소스 코드

var result = fetch("https://jsonplaceholder.typicode.com/todos/1");

 

result

    .then(function (response) {

        console.log("then은 result 정상일 경우");

    })

    .catch(function (error) {

        console.log("catch는 result 비정상일 경우");

    });

console.log("result 결과 전에 실행됨");

결과

 

결과를 보면 fetch함수로 해당 결과를 받기 전에 'result 결과 전에 실행됨' 로그가 찍힌 것을 볼 수 있다.

 

이후에 then 내용안의 로그가 실행되는 것을 확인 할 수 있다. 

 

이처럼 fetch 함수는 promise 객체를 반환하므로 비동기 처리, then, catch 모두 사용 할 수 있는 것이다.