[코드스테이츠 TIL] Fetch 서버에 요청하기

 

[ fetch ]

브라우저 내장 메소드이며, 서버에 요청하는 용도로 사용한다.

• 요청하는 주체: 클라이언트
• 요청에 따른 응답을 주는 것: 서버

 

• 일반적으로 서버에게 HTTP (URL) 요청 후, 응답을 처리한다
• 응답은 다양한 형태로 받을 수 있다 (JSON, HTML, plain text 등등)

 

http 요청은 fetch API를 활용한다.

//날씨 API 사용

fetch('http://서버주소/weather?q=Seoul')
.then(function(resp) { 
return resp.json(); // 응답 형식에 따라 resp.text() 가 될 수도 있다 
})
.then(function(json) { 
console.log(json); // { tempature: 27 }
});

* 날씨 API

https://openweathermap.org/API

Weather API - OpenWeatherMap

 

 

API 사용시 유의할 점

API는 공짜가 아니므로 서비스 제공자로부터 권한을 받아야 한다.

그러므로 API Key는 암호처럼 취급되어야 한다.

 

 

서버에 기록하는 방법

- HTTP 요청을 GET이 아닌 POST를 이용

- 내용(payload)와 함께 전달

ex) 게시판에 새로운 글을 쓰고자 할 때, 아이디와 비밀번호로 로그인을 하고자 할 때

방법은: POST

주소는: /posts

내용은: { ‘userId’: 1, ’title’: 제목, ‘body’: 내용}

let newPost = { "userId": 1, "title": "새 글을 써봤습니다", "body": "안녕하세요?"
}
fetch('http://서버주소/posts', { method: 'POST', body: JSON.stringify(newPost)
}).then(function(resp) { return resp.json();
}).then(function(json) { console.log(json); // { id: 123 }
});

 

 

다양한 API 모음

 

https://www.apistore.co.kr/main.do

API스토어-나의 비즈니스가 성공하는 노하우