환경

npm 6.14.8

절차

테스트 호출을 위한 프로젝트 만들기

create-react-app test_call_api
cd test_call_api
npm start

실행하면 다음 페이지에 액세스하면 기본 react의 톱 화면이 표시됩니다.

API 실행 처리를 실행하는 데 필요한 것을 설치

이번에는 API 실행을 위해 axios와 화면을 깨끗하게하는 bootstrap을 설치합니다.
설치 후에는 npm audit fix 한다.

npm i axios bootstrap react-bootstrap
npm audit fix
vim src/App.js

App.js의 내용을 구현

다음과 같이 구현했습니다. 이번은 세계 제일 간단한 API의 공휴일 API로부터 취득하겠습니다.
h tps:// 기주 b. 이오/

import axios from 'axios';
import React, { Component } from 'react';
import { Container, Row, Col, Button, Table, Form } from 'react-bootstrap';

const API_URL = 'https://holidays-jp.github.io/api/v1/date.json';
/**
APIのレスポンスは以下を想定する
{
  "2017-01-01": "元日",
  "2017-01-02": "元日 振替休日",
  "2017-01-09": "成人の日"
}
*/

export default class App extends Component {
  // 初期値を設定
  constructor(props) {
    super(props);
    this.state = {
      api_data: [],
      // 今回test_paramは使用しないが、パラメータ設定方法の一つとして記載する
      test_param: ''
    };
  }

  /**
   * APIを実行する
   */
  handleTestCallApi() {
    axios
    // パラメータを指定する場合は以下のように設定
    // { params: { test_param: this.state.test_param }}
    .get(API_URL) 
    .then((results) => {
      const data = results.data; // APIレスポンスを取得する
      this.setState({
        api_data: data,
      });
    },
    )
    .catch((error) => {
      if (error.response) {
        // 200系以外の時にエラーが発生する
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      } else if (error.request) {
        console.log(error.request);
      } else {
        // 上記以外のエラーが発生した場合
        console.log('Error', error.message);
      }
    });
  }
  /**
   * 変更があった場合、test_paramを更新する
   * 今回test_paramは使用しないが、パラメータ設定方法の一つとして記載する
   */
  handleChange(event:InputEvent) {
    this.setState({
      test_param: event.target.value,
    });
  }

  render() {
    return (
      <div className="app">
        <Container>
            <h1>API実行する画面</h1>
            <Form>
              <Row>
                <Col className="submit-form">
                  <Form.Group controlId="formBasicShopId">
                    <Form.Control value={this.state.test_param} type="text" name="test_param" onChange={(e) => { this.handleChange(e); }} />
                  </Form.Group>
                </Col>
              </Row>
              <Button onClick={() => this.handleTestCallApi()}>Exec</Button>
            </Form>
            <br />
          <Table>
            <thead  data-type="ok">
              <tr><th>date</th><th>何の日</th></tr>
            </thead>
            <tbody>
              {Object.keys(this.state.api_data).map(key => (
                <tr key={key}>
                  <td>{key}</td><td>{this.state.api_data[key]}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        </Container>
      </div>
    );
  }
}

화면을 열어보십시오.
http://localhost:3000/



어쩐지 깨끗한 화면이 되어 있지 않습니다, Bootstrap이 잘 움직이지 않는 것 같습니다.

vim public/index.html

index.html의 meta 태그 아래에 다음과 같이 bootstrap을로드해야했습니다.

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

이제 다시 액세스합니다.



잘 된 것 같습니다.
Exec 버튼을 누르면 공휴일 정보가 표시됩니다.

결론

react.js에서 API를 실행하는 방법이 얼마인지 조사해도 몰랐기 때문에 정리했습니다.