API in JS

Javascript에서는 API를 어떻게 가져오고 사용할까?

그전에 API가 뭔지 알아보자

API

API는 우리가 식당에가서 밥을 주문하고 밥을 먹는거와 같다고 할 수 있다

자신이 원하는 식당에 가서 원하는 메뉴를 주문하고 그 메뉴를 받아 먹는다

API도 똑같다

자신이 원하는 서비스에서 원하는 기능이나 데이터를 요청하고 받은 응답을 받아 활용한다

본론으로 돌아와서 js에서는 어떻게 api를 가져오는지 알아보자

js에서는 다양한 방법으로 api를 가져오지만 요즘은 js 내장 함수인 fetch와 외부 라이브러리인 axios를 많이 사용한다

fetch

fetch는 js의 내장 함수로 promise기반으로 promise를 사용하는 것과 비슷하다고 할수 있다

장점

• js내장 함수여서 axios처럼 의존성 설치 및 import 해줄 필요가 없다
• 내장 함수이기 때문에 업데이트에 따른 에러가 없다

단점

• fetch를 지원하지 않는 브라우저가 존재한다
• JSON으로 변환해주는 과정이 필요하다

fetch("requestURL").then(response => console.log(response.json()));

fetch는 비동기적으로 작동하는데 코드를 보면 requestURL로 요청을 보낸뒤 response가 오면 console.log()를 실행시키는 코드이다
하지만 아까 말한 단점인 JSON으로 일일이 바꾸어 주어야 한다

여담으로 나는 fetch함수를 노마드코더 강의에서 처음 사용해보았는데 비동기나 promise에 대한 지식이 없었어서 이해를 못한 기억이 있다

axios

axios는 외부 라이브러리로 다양한 환경에서 사용수 있고 fetch와 마찬가지로 promise 기반으로 작동한다

장점

• 다양한 요청들을 간단하게 사용 할 수 있다
• 다양한 기능들이 존재한다
• 응답을 받을때 자동으로 JSON으로 변환 해준다

단점

• 외부 라이브러리여서 의존성 설치 및 import를 해주어야 한다

install

$ npm install axios

or

$ yarn add axios

axios.get("requestURL").then((response) => console.log(response.data));

위의 코드는 axios의 기본형태이다

promise기반으로 작동해서 코드만 본다면 fetch와 유사하다

하지만 fetch와 다르게 axios에서 응답을 받을때 JSON으로 변환 해주기 때문에 따로 변환 해줄 필요가 없다

instance

axios는 다양한 기능이 존재하는데 그중 하나가 instance를 만드는 것이다

instance는 request를 보낼때 설정해줘야 하는 다양한 것들(ex. header or API KEY 등등)을 변수에 할당하고 사용하는 것이라고 말할 수 있다

const axiosInstance = axios.create({
  baseURL: "baseURL",
  headers: { Authorization: APIKEY },
});

axiosInstance.get("/userlist").then(response => console.log(response.data));

axiosInstance.get("/userinfo").then(response => console.log(response.data));

이런식으로 request url의 뒷부분만 바꿔서 요청들을 쉽게 보낼 수 있다

이렇게 fetch와 axios를 사용해서 js에서 api요청을 보내는 방법들을 알아 보았다