React에서 Axios를 사용하여 GoogleAPI를 두드려 보았습니다.

개요

이번에는 React에서 axios 라이브러리를 사용하여 GoogleAPI를 두드려 보았으므로 그 때의 메모입니다.
axio는 매우 사용하기 쉽기 때문에 React에서 API를 두드려 보자는 사람에게 추천합니다.

우선 터미널에서

yarn add axios

에서 설치하십시오.

상세
htps //w w. 음 pmjs. 코 m / Pac 카게 / 아오 s

사용한 GoogleAPI 정보

이번에는 Google Maps Geocoding API를 사용했습니다. 간단히 말하면, 건물의 이름 (쓰텐 카쿠 등)을 전달하면
그 경도와 위도를 돌려주는 API입니다. 구글씨 대단하네요! !

상세

axios 정보

axios는 GET이나 POST 등 다양한 HTTP 요청을 던질 수 있는 메소드입니다.
이번에는 GET 요청을 보내 API 데이터를 받는 방법을 소개합니다.

axios
    .get(エンドポイント, { params: {送りたいパラメーターの指定}　})
    .then((results) => {
        // 通信に成功してレスポンスが返ってきた時に実行したい処理
    }
    .catch((error) => {
        // 通信に失敗してレスポンスが返ってこなかった時に実行したい処理
    }

간단한 axios 사용법을 설명합니다. axios.get은 두 개의 인수를 취하고,
첫 번째 인수는 params로 끝점과 두 번째 인수에 전달할 매개 변수를 지정합니다.
그리고 응답이 돌아왔는지 여부에 따라 행동이 바뀝니다.

응답이 돌아왔을 때
- 돌아온 데이터가 results 안에 들어가 then이 달린다.

응답이 돌아오지 않았을 때
- error 메시지가 error에 들어가고 catch가 실행됩니다.

이러한 흐름으로 axios.get()는 움직입니다.

실제 코드 예

아래에 axios를 사용한 코드를 넣습니다.

src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/App';

ReactDOM.render(<App />, document.querySelector('.container'));

src/components/App.jsx

import React, { Component } from 'react';
import axios from 'axios';

const GEOCODE_ENDPOINT = 'https://maps.googleapis.com/maps/api/geocode/json';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      place: '通天閣', //ここに好きな場所を指定。
    };
  }
  handleGetLatAndLng() {
    // Google Maps APIが指定した必須パラメータ(この場合はaddress)をparamsに渡す。
    axios
      .get(GEOCODE_ENDPOINT, { params: { address: this.state.place } })
      .then((results) => {
      // 以下のGoogle API のレスポンスの例を元に欲しいデータを取得
        const data = results.data;
        const result = data.results[0];
        const location = result.geometry.location;
        this.setState({
          address: result.formatted_address,
          lat: location.lat,
          lng: location.lng,
        });
      },
      )
      .catch(() => {
        console.log('通信に失敗しました。');
      });
  }

  render() {
    return (
      <div className="app">
        <h1 className="app-title">緯度軽度検索</h1>
        <p> 土地名: {this.state.place} </p>
        <p> 経度: {this.state.lat}</p>
        <p> 経度: {this.state.lng}</p>
        <input
          type="button"
          value="経度・緯度を検索"
          onClick={() => this.handleGetLatAndLng()}
        />
      </div>
    );
  }
}

export default App;

Google API 응답 예제(JSON)

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "1600",
               "short_name" : "1600",
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "Amphitheatre Pkwy",
               "short_name" : "Amphitheatre Pkwy",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Mountain View",
               "short_name" : "Mountain View",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "Santa Clara County",
               "short_name" : "Santa Clara County",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "California",
               "short_name" : "CA",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "United States",
               "short_name" : "US",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "94043",
               "short_name" : "94043",
               "types" : [ "postal_code" ]
            }
         ],
         // 今回はこの部分のformatted_address, geometryのlat, lngを取得
         "formatted_address" : "1600 Amphitheatre Parkway, Mountain View, CA 94043, USA",
         "geometry" : {
            "location" : {
               "lat" : 37.4224764,
               "lng" : -122.0842499
            },
            "location_type" : "ROOFTOP",
            "viewport" : {
               "northeast" : {
                  "lat" : 37.4238253802915,
                  "lng" : -122.0829009197085
               },
               "southwest" : {
                  "lat" : 37.4211274197085,
                  "lng" : -122.0855988802915
               }
           }
        },
        "place_id" : "ChIJ2eUgeAK6j4ARbn5u_wAGqWA",
        "types" : [ "street_address" ]
     }
      ],
      "status" : "OK"
}

이와 같이 코드를 작성하고 【경도 · 위도 검색】 버튼을 누르면
츠텐카쿠의 경도, 위도를 취득할 수 있게 됩니다.



버튼 누르기



츠텐카쿠의 경도와 위도를 얻을 수 있었습니다! !

this.state = {
      place: '通天閣', //ここに好きな場所を指定。
    };

여기를 바꾸고 여러 가지 시도해보십시오.

요약

axios를 사용하면 쉽게 Google API 또는 Twitter API를 사용할 수 있습니다.
그 밖에도 POST 요청을 보내거나 delete 요청을 보내거나 다양한 사용법이 있는 것 같기 때문에,
여러가지 지금부터 시험해 나가려고 생각합니다.