Ajax(4)-fetch

fetch

프로미스 기반으로 구성
비동기식 방식
js의 기본 기능
XMLHttprequest의 방식은 너무 복잡하다

---

0.promise 객체

자바스크립트에서 제공하는,비동기를 간편하게 처리할 수 있도록 도와주는 객체
정해진 기능을 수행하고 나서 결과에 따라 성공 or 실패에 대한 정보를 리턴한다.

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

const promise = new Promise((resolve, reject) => {
  console.log("install excutor");
  setTimeout(() => {
    resolve("data");
  }, 1000);
});

 

 

 

 

1.fetch()의 기본 문법

let promise = fetch(url,[options]);

• url  - 접근하고자 하는 URL
• options - (http메서드, headers,body정의) , 생략도 가능하다. default 방식은 GET 방식
• promise 타입의 객체를 반환한다.

 

---

2.기본적인 fetch()의 요청

fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));

위의 코드는 네트워크에서 JSON 파일을 가져와서 콘솔에 출력

Response는 HTTP 응답 전체를 나타내는 객체로, JSON 본문 컨텐츠를 추출하기 위해서는 json() 메서드가 필요하다

 

---

 

3.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() 함수는 default로 GET 방식으로 작동하고 GET 방식은 옵션인자가 필요없다.
대부분의 REST API들은 JSON 형태의 데이터를 응답 , 따라서 response객체를 json() 메서드로 변형가능
이 메서드를 호출하면, response 객체로부터 JSON 형식의 응답을 자바스크립트 객체로 변환하여 얻는다.

 

---

4.post 요청

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "테스트",
    body: "테스트 해보기!",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))

 

POST 방식일 경우, method 옵션을 명시해야 한다.
headers에는 json 형식을 사용한다고 알려야 한다.
body의 본문 전체를 json 형식으로 바꾸어 준다. ==> JSON.stringify()  js객체를 json 객체로 변환

---

5. put 요청

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

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

 

---

6. DELETE 형식

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

해당 url의 데이터를 지워버리는 요청 , method만 명시할것.

 

---