Day79 - [js]비동기 01

이번에는 java scirpt의 비동기 fetch 에 대해서 알아 봅시다.

 

비동기 fetch

fetch 는 java script 에서 지원하는 비동기 방식 인데요

 

비동기 방식은 페이지의 이동이 일어나지 않고, 특정한 곳에 데이터를 전달하는 방법 입니다.

 

해당 방식은 콜백함수를 이용해서, 다른 작업을 처리하는 도중에 이루어집니다.

이는 해당 코드를 처리하는데 시간이 얼마나 걸릴지 모르기 때문에, 그 뒤에 있는 코드를 먼저 처리하라는 것 입니다.

 

비동기 방식에는 여러가지가 있는데, 그 중에 fetch 를 이용해서 알아 봅시다.

 

먼저, 특정한 데이터를 만들어 주기 위해서 "hi.txt" 라는 파일을 만들고, 안에 데이터를 아무렇게나 작성을 했습니다.

 

위처럼 작성을 해주면 되는데요,

 

하나씩 보도록 합시다.

 

먼저, fetch 를 사용하게 되면, 해당 데이터를 얻어오는데 시간이 얼마나 걸릴지 모르기 때문에, promise 라는 내장객체를 반환해 주는데, promise 는 상태결과를 반환해줍니다.

 

1. pending ( 수행중 )

2. fullfiled ( 성공 )

3. reject ( 거절 )

 

promise 내장객체에는, then 함수를 사용할 수 있는데, 이는 콜백함수를 의미합니다.

then 안에, 콜백함수를 넣어 줍니다. ( 보통 response라는 매개변수를 사용합니다 )

 

이 response 는 특정 데이터가 담겨 있는데요, 이 특정 데이터를 문자열로 변경하기 위해서, text 함수를 사용합니다.

 

text 함수는 fetch 처럼, promise 내장객체를 반환 해줍니다.

 

그렇기 때문에, 또다시 then 함수를 사용하고, 이 안에는 콜백함수 를 넣어주면서 매개변수로는 얻어온 특정 데이터를 문자열로 변환시켜서 넣어주게 됩니다.

 

비동기 함수는 순서에 상관없이 실행하게 됩니다.

순서대로 실행하게 된다면, 1 이 먼저 뜨고, 2가 떠야 하지만,

2가 먼저 실행되게 됩니다.

 

이는 비동기 방식이 실행되기 까지 시간이 얼마나 걸릴지 모르기 때문입니다.

 

비동기 방식끼리도 어떤게 먼저 실행이 될지 순서는 장담할 수 없습니다.