fetch

 

동기 방식: 직렬적(순차적)으로 작업 수행.

해당 작업이 수행중이면 다음 작업은 대기.

서버는 한번에 많은 요청이 들어오고 동시에 많은 요청을 처리해야 하기 때문에 이러한 방식과는 맞지 않음

 

 

비동기 방식: 병렬적으로 처리.

요청이 들어오면 해당 요청에 의한 작업이 끝나지 않았더라도 계속 요청을 받고, 작업이 끝났다는 이벤트가 오면 해당 요청을 처리함

예) Web API, Ajax, axios, setTimeout 등

 

 

 

 

자바스크립트는 싱글 스레드 방식으로 하나의 스레드에서 모든 것을 돌려야함.

비동기적 자바스크립트 동작을 하는 기술들을 통틀어 Ajax라고 하는데, Ajax를 이용해서 데이터를 불러오는 동안 다음 코드를 진행하는 것이 가능해짐

 

 

---

 

Ajax( Asynchronous  Javascript And Xml)

브라우저가 갖고있는 XMLHttpRequest객체를 이용해서 전체 페이지를 새로고침하지 않고 페이지의 일부만을 위한 데이터를 가져오는 기법

 

기존 비동기 처리는 이벤트를 기반으로 하는  XMLHttpRequest API를 통해 통신을 주고받았지만 엄청 번거로운 작업이었음  

이를 개선하기 위해 JQuery를 통해 구현하기 시작하다가

이후 HTTP 요청에 최적화된 API들(Axios(XHR, Promise) , fetch(Promise))이 등장하면서 fetch API를 통해 통신하는 것이 주요 방식으로 자리 잡음

서버에서 정보를 가져올 때 리액트처럼 페이지 전체를 새로고침하지 않아도 받아올 수 있음

 

 

---

 

promise 객체

자바스크립트에서 제공하는, 비동기를 간편하게 처리할 수 있도록 도와주는 객체

미래에 발생할 일 또는 그 결과로서 비동기 작업 처리 결과를 반환하는 객체로 활용됨

정해진 기능을 수행하고나서 결과에 따라 성공이나 실패에 대한 정보를 리턴

 

fetch API는 promise와 함께 ajax를 쉽게 사용할 수 있는데, fetch가 반환값으로 가지는 것이 promise일만큼 promise는 네트워크 통신과 밀접한 연관이 있음

 

    let promise = new Promise(function(resolve, reject){
        //promise가 만들어지면 executor함수는 자동으로 실행됨
        setTimeout(()=>{
            resolve("완료");
        },1000);
        //reject("실패");
    });
    
    
    promise
	.then((rst)=>console.log("성공시 >> ", rst))
	.catch((err)=>console.log("요청 실패시 >> ",err));

 

promise 객체를 생성하면 두가지 콜백함수를 인자로 가지는 executor라는 콜백함수를 전달해야하는데,

resolve - 해결, 이행, 완료시 결과를 표현하는 객체로서  .then()으로 처리결과 받음

reject - 거부, 실패시 결과를 표현하는 객체로서 .catch()로 에러정보 받음

 

 

결과 반환 전까지 3개의 상태를 거치는데, promise의 3개의 상태로는 아래와 같음

 

- pending 대기 - 객체 생성 초기단계 / 비동기 작업 중 / 결과 값은 아직 없는 상태 

- fulfilled 이행 - 비동기 작업 성공적 완료 / 결과 값이 있으며 사용 가능한 상태  →  resolve 메소드 호출

- rejected 거부 - 비동기 작업 실패 / 에러정보 등 추가정보를 제공함

               (TypeErr와 reject에 관한 내용만 표현, 400, 500은 catch대상이 아님 )  →  reject메소드 호출

 

 

 

fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체(get, post, put, delete ..)를 받고,

promise 타입의 객체를 반환함

	fetch(url, options)
	.then((response) => console.log("response:", response))
	.catch((error) => console.log("error:", error));

 

반환된 객체는 API 호출이 성공했을 경우에는 .then 으로 resolve객체를 리턴받고, 실패했을 경우에는 .catch로 reject 객체를 리턴받음

 

---

 

GET 요청

    fetch("https://jsonplaceholder.typicode.com/posts/1", { method: "GET" }).then(
      (response) => console.log(response)
    ); // 상태코드 및 Header에 대한 정보

    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => response.json())
      .then((data) => console.log(data)); //자바스크립트 객체 형식으로 변환된다.

 

fetch()함수는 디폴트로 get방식으로 작동함

대부분의 rest api 들은 json 형태의 데이터를 응답하기 때문에, 응답받은 response객체는 역시 json()메서드로 변형할 수 있다.

 

 

POST 요청

    fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        title: "Test",
        body: "I am testing!",
        userId: 1,
      }),
    })
      .then((response) => response.json())
      .then((data) => console.log(data))

 

headers에는 부가적인 정보가, body에는 post로 보내는 데이터가 들어감

headers에 json 형식을 사용한다고 알려주고, 그에 맞게 body의 본문 전체를 json 형식으로 바꿔줌

 

 

 

PUT 요청

    fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        title: "Test",
        body: "I am testing!",
        userId: 1,
      }),
    })
      .then((response) => response.json())
      .then((data) => console.log(data))

 

해당 url의 데이터를 수정하는 요청

전체 데이터를 교체해버리기 때문에 부분만 수정하려면 update사용. 

 

 

 

DELETE 요청

    fetch("https://jsonplaceholder.typicode.com/posts/1", {
      method: "DELETE",
    })
      .then((response) => response.json())
      .then((data) => console.log(data))

 

해당 url의 데이터를 지워버리라는 요청

보낼 데이터가 없으니 메소드만 명시해주면 됨

 

 

---

• endpoint는 fetch에 넣는 url중 중복되는 부분을 변수에다 할당해서 중복을 줄이는 방법으로, endpoint를 위한 변수를 만들어서 주소를 할당하는 방식으로 쓰임

 

• then, catch보다 async/await, try/catch를 사용하는 것이 최신 문법