console.log(1);
console.log(2);
console.log(3);
console.log(4);
코드의 작성 순서에 따라 실행
console.log(1);
console.log(2);
setTimeout(function(){console.log(3)}, 5000);
console.log(4);
각자의 동작 기준에 따라 실행됨
setTimeout이라는 코드를 만나는 순간, 실행 예약만 걸어두고 다음 task로 넘어감
만약 네이버나 구글에서 검색할 때 네트워크 탭의 Name에 열거된 작업 리스트 중 ac로 시작하는 항목을 클릭하면, 자동완성을 위해 자바스크립트가 검색하고 있는 코드들을 확인할 수 있다. 예를 들어 생활을 검색하기 위해 새까지 입력을 했다면, 새해, 새조개등의 연관검색어들이 열거되어 있는 것을 확인할 수 있다.
이러한 경우 동기적으로 코드가 실행된다고 하면, 우리가 ㅅ을 쳤을 때, 새를 쳤을 때마다 연관검색어를 찾기위한 코드가 실행되고, 그 코드의 실행이 완료될 때까지 우리는 서버, 네트워크와 통신 중인 브라우저에서 어떤 작업도 실행할 수없을 것이다.
하지만, 우리가 사용하는 브라우저와 네트워크가 비동기적으로 실행되기 때문에, 우리는 네트워크와의 통신이 이뤄지고 있는 도중에도 다른 페이지로 이동하거나, 새로운 검색어를 입력하는 등의 작업을 별도로 실행할 수 있다.
Fetch API
Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀 더 강력하고 유연한 조작이 가능합니다.
기본개념과 사용 방법
Fetch에는 일반적으로 오브젝트로 Request와 Response_(en_US)가 포함되어 있습니다. 이것들은 service worker나 cache API같이 Response와 Request객체를 다루는 API나 독자적으로 리스폰스를 발생시키는 경우에도 사용 가능합니다.
또한 CORS나 HTTP 오리진 헤더의 행동에 관련한 개념에 대해서도 정의되어 있습니다. 이 정의는 여러곳에 분산되어 있는 갖가지 행동에 대한 정의들을 한 곳에 고쳐 쓴 것입니다.
Fetch API로 리소스를 취득하기 위해서 GlobalFetch.fetch 메소드를 불러들여야 합니다. 이 메소드는 window나 WorkerGlobalScope 와 같은 인터페이스로부터 구현되었습니다.
fetch()를 불러들이는 경우, 취득할 리소스를 반드시 인수로 지정하지 않으면 안됩니다. 읽어들인 뒤 fetch()는 promise 객체를 반환합니다. 리퀘스트가 성공하든 실패하든 해당 리퀘스트 통신에 대한 Response 객체가 취득됩니다. fetch()의 두번째 인수는 초기화에 사용되는 객체를 정의하고 있습니다. 이 인수는 기입하지 않아도 함수의 동작에 문제가 없습니다. 이 인수에 대한 상세한 정보는 Request를 참고해 주시기 바랍니다.
Response를 가져온 후에, 콜백함수의 매개변수로 담기 response 객체에는 리스폰스에 포함되어있는 컨텐츠와 그에 대한 처리방법이 담긴 메소드들이 담겨 있습니다. 자세한 사항은 Body를 참고해주시기 바랍니다.
Request()와 Response()를 사용하는 것으로 Request와 Response를 직접 작성할 수 있습니다. 하지만, 이러한 추가 옵션들은 FetchEvent.respondWith와 같은 또다른 API를 불러들이는 작업이 수행되어야 하므로 필요하지 않다면 굳이 작성하지 않는 편이 좋습니다.
Using Fetch
Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능합니다. 또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있습니다.
이전에 이러한 기능을 XMLHttpRequset 에서 제공하고 있었습니다. Fetch는 이러한 API의 대체재로 ServiceWorkers 같은 기술로 간단히 이용하는 것이 가능합니다. 또한 CORSSK HTTP 확장과같은 HTTP에 관련한 개념을 모아 정의하고 있습니다.
Fetch의 기본 스펙은 jQuery.ajax()와 기본적으로 두가지가 다르다는 사실에 유념해야 합니다.
- fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject하지 않습니다. HTTP Statue Code가 404나 500을 반환하더라도요. 대신 OK의 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환됩니다.
- 보통 fetch는 쿠키를 보내거나 받지 않급니다. 사이트에서 사용자 세션을 유지 관리해야하는 경우 인증되지 않는 요청이 발생합니다. 쿠키를 전송하기 위해서는 자격증명(credentials) 옵션을 반드시 설정해야 합니다.
2017년 8월 25일 이후 기본 자격증명(credential) 정책이 same-origin으로 변경되었습니다. 파이어폭스는 61.Ob13 이후 변경되었습니다.
기본적인 fetch는 누구라도 알기쉽고 간단하게 작성할 수 있습니다. 아래의 코드를 봐주시기 바랍니다.
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});네트워크에서 JSON 파일을 가져와서 콘솔에 인쇄합니다. 간단한 fetch() 사용 흐름은 인수 한 개(가져올 자원의 경로)를 가져오고 응답을 포함하는 약속(Response 객체)를 반환하는 것입니다.
이것은 단순한 HTTP Response이며, 실제 JSON이 아닙니다. response 객체로부터 사진을 가져오기 위해서는 json() 메서드를 사용할 필요가 있습니다. (Body의 믹스인으로 정의되어, 이것은 Request 객체와 Response 객체의 쌍방에 구현되어 있습니다.
- 노트: http Request와 http Response의 Body mixin은 Body 컨텐츠를 다른 mine 타입으로 사용하는 비슷한 메서드를 제공하고 있습니다. 상세한 내용은 Body 섹션을 참고해 주시기 바랍니다.
Fetch Request는 검색된 리소스로부터의 지시가 아닌 CSP의 connect-src의 디렉티브에 의해 제어됩니다.
fetch
.then()
서버에서 응답 성공시, then 자체가 응답객체를 반환
.catch()
서버에서 응답 실패시
리퀘스트의 옵션 적용
