OpenWeatherMap api by fetch and axios

INDEX

Preview

https://openweathermap.org/api

openweathermap.org

 

간단하게 날씨 정보를 OpenWeatherMap api를 호출해서 불러오려고 합니다.

 

api를 호출하는 방법엔 fetch, axios, ajax 등이 있습니다.

 

api key는 위 사이트에 접속해서 회원가입 후에 my api key 메뉴에 들어가면 있습니다. (하지만 몇 분 내지 몇십 분을 기다려야 해당 key를 사용할 수 도 있습니다)

 

Fetch!

우선 class component 방식은 아래와 같습니다. api 정보 중 wind (바람)의 speed 값만 표현하려고 합니다.

const weatherAPI = "317e6f3e4ae59c61e364c9c3d15a02b3";
const cityId = "6167865"; //toronto city id
const url = `https://api.openweathermap.org/data/2.5/weather?id=${cityId}&appid=${weatherAPI}`;

const connectWithFetch = (callback: Function) => {
  fetch(url)
    .then((response) => response.json())
    .then((response) => {
      callback(response);
    });
};
class App extends React.Component {
  state = {
    wind: { speed: null, deg: null },
  };
  render(): React.ReactNode {
    return (
      <div>
        {this.state.wind.speed === null ? (
          <div>data is loading</div>
        ) : (
          <div>{this.state.wind.speed}</div>
        )}
      </div>
    );
  }
  componentDidMount(): void {
    connectWithFetch((response) => {
      this.setState({
        wind: { speed: response.wind.speed, deg: response.wind.deg },
      });
    });
  }
}

 

이를 function component를 사용해 보려면 아래와 같습니다.

import React, { useEffect } from "react";
import { useState } from "react";

const weatherAPI = "317e6f3e4ae59c61e364c9c3d15a02b3";
const cityId = "6167865"; //toronto city id
const url = `https://api.openweathermap.org/data/2.5/weather?id=${cityId}&appid=${weatherAPI}`;

const connectWithFetch = (callback: Function) => {
  fetch(url)
    .then((response) => response.json())
    .then((response) => {
      callback(response);
    });
};

type windType = {
  speed: number;
  deg: number;
};
function App() {
  const [windSpeed, setWindSpeed] = useState<windType>({
    speed: null,
    deg: null,
  });
  useEffect(() => {
    connectWithFetch((response) => {
      const { speed, deg } = response.wind;
      setWindSpeed({ speed, deg });
    });
  }, []);
  return (
    <div>
      {windSpeed.speed === null ? (
        <div>data is loading</div>
      ) : (
        <div>{windSpeed.speed}</div>
      )}
    </div>
  );
}

export default App;

Functional component는 useState, useEffect 등의 hook을 사용할 수 있습니다.

 

 

Axios!

axios를 사용하려면 import를 해야 합니다.

import axios from "axios";

다음 axios를 사용하는 함수를 만듭니다. 위 connectWithFetch를 connectWithAxios로만 바꾸면 됩니다.

const connectWithAxios = (callback: Function) => {
  axios.get(url).then((response) => {
    console.log(response);
    callback(response.data);
  });
};

나머지 컴포넌트는 위 Fetch에서 사용한 코드와 동일합니다.

axios 결과

 

최대한 간단하게 api 호출하는 방법을 소개해드렸는데요, 아래처럼 여러 options를 통해 더 규격화된 fetch를 사용할 수 있습니다. 

// POST 메서드 구현 예제
async function postData(url = '', data = {}) {
  // 옵션 기본 값은 *로 강조
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE 등
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json',
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // body의 데이터 유형은 반드시 "Content-Type" 헤더와 일치해야 함
  });
  return response.json(); // JSON 응답을 네이티브 JavaScript 객체로 파싱
}