자바스크립트 내장 객체
fetch 함수는 window.fetch()로 사용되기도 한다.
첫번째 인자로 API , 즉 url 주소를 받고 두번째 인자로 옵션 객체를 받게되는데
옵션 객체에는
Promise 타입의 객체를 반환한다.
API호출이 성공했을 경우(then)에는 응답(response)객체를 resolve 하고
실패했을 경우(catch)에는 error로 객체를 regect한다.
fetch("https://jsonplaceholder.typicode.com/posts/1").then((reponse) =>{
console.log(succese);
});
위는 url을 통해 get 호출을 진행하는 코드이다
Response {status: 200, ok: true, redirected: false, type: "cors", url: "https://jsonplaceholder.typicode.com/posts/1", …}
와 같은 반환값을 볼 수 있다.
해당 코드에서 쓴것 처럼 GET 호출 값을 json()메소드를 사용해서 반환하게 되면
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit↵suscipit recusandae consequuntur …strum rerum est autem sunt rem eveniet architecto"
}
처럼 JSON 포멧의 응답을 자바스크립트 객체로 변환하여 얻을 수 있다.
POST 호출 시에는 option 을 지정해줘야 한다.
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
data: JSON.stringify({
title: "TEST",
body: "TEST",
}),
}).then((response) => console.log(response));
결과 값으로 201 status 값을 확인 할 수 있다.
Response {status: 201, ok: true, redirected: false, type: "cors", url: "https://jsonplaceholder.typicode.com/posts", …}
fetch("https://jsonplaceholder.typicode.com/posts",{
method : "POST",
headers : {
"Content-Type": "application/json",
},
data : JSON.stringify({
title: "TEST",
body: "TEST"
userId: 1,
}),
})
.then((response) => response.json())
.then((data) => console.log(data))
GET호출 처럼 json()메소드를 사용해서 객체 형태로 값을 얻을 수 있다.
{
"id" : 101
}