【Vue.js】axios를 이용해 WebAPI로부터 데이터를 취득하는 방법 【메모】

9554 단어 axiosVue.js

소개



첫 투고&개인 메모(빠진 포인트 메모)의 생각으로 쓰고 있습니다.
졸라 문장 & 내용이 됩니다만, 그 점 양해 바랍니다.

이 기사를 읽으면 Vue와 axios를 사용하여 API 데이터를 얻는 방법을 알 수 있습니다.

개발 환경 및 사용 API


  • macOS Mojave (10.14.3)
  • Vue.js
  • Chart.js (2.7.3)
  • axios (0.18.0)
    ※모두 스크립트(CDN)로 읽어들입니다
  • RESAS API (ㅡㅡㅜㅜㅜㅜㅜㅜㅜ Resa s-po rta l. . jp/)
    →도도부현 데이터나, 도도부현마다의 데이터를 취득하는데 사용합니다

    • 막상 구현



    파일 준비



    index.html을 준비한다.

    index.html
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TEST</title>

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

<body>

    <div id="app">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    //APIデータを受け取る配列を定義
                    prefectures: null,
                }
            },
            mounted() {
                  //実行したい処理を書く
            }
        })
    </script>
</body>

</html>

    도도부현의 취득을 해본다



    axios를 사용하여 API 데이터를 검색하고 싶지만 RESAS API의 경우,

    API 키 설정 정보
    이 API에 액세스하려면 API 키를 요청 헤더 X-API-KEY로 설정해야합니다.
    요청 헤더에 API 키가 설정되어 있지 않으면 요청한 데이터가 반환되지 않고 403 Forbidden 오류가 발생합니다.

    라고 기술이 있어, API 취득시에 요구 헤더에 API Key를 설정하지 않으면 안됩니다.

    index.html
    <div id="app">
 <!-- 返ってくるAPIデータを表示させる -->
 {{ this.prefectures }}
</div>

              mounted() {
                var prefectures_url = 'https://opendata.resas-portal.go.jp/api/v1/prefectures';
                axios
                .get(prefectures_url)
                .then(response => (this.prefectures = response));
            }

    ↑요청 헤더를 설정하지 않고 취득하려고 하면, 이하와 같은 느낌으로 403 에러가 되어 버립니다.

    index.html


    이것은 get 메소드의 제 2 인수에 APIKEY를 건네주면 API 데이터의 취득을 할 수 있게 됩니다.
                mounted() {
                var prefectures_url = 'https://opendata.resas-portal.go.jp/api/v1/prefectures';
                axios
                .get(prefectures_url, { headers: { 'X-API-KEY': '各自で取得したKEY' } })
                .then(response => (this.prefectures = response));
            }

    출력 결과↓


    안전한 가치를 얻을 수있었습니다! !
    이건 전혀 찾아도 찾지 못하고 2,3일 정도 빠졌어요...

    취득한 데이터입니다만, 데이터를 취급하기 쉽도록 이하와 같이 수정.
                mounted() {
                var prefectures_url = 'https://opendata.resas-portal.go.jp/api/v1/prefectures';
                axios
                .get(prefectures_url, { headers: { 'X-API-KEY': '各自で取得したKEY' } })
                .then(response => (this.prefectures = response.data.result));
            }



    이런 느낌에 필요한 정보만 얻을 수 있었습니다!

    참고로 한 공식 문서: htps // jp. 아 js. 오 rg / v2 / 코오 k 보오 k / 우신 g - 아오 s - 콘스메 아피 s. HTML

    끝에



    지금부터는, 이 취득한 데이터를 바탕으로 무언가 작성하는 기사를 쓰고 싶습니다만, 나중에 갱신해 가고 싶습니다.
    읽어 주셔서 감사합니다!
    Nuxt.js의 axios-module에서 GitHub Trending 데이터보기
    Vue.js 및 axios로 API에서 데이터를 검색하고 표시

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage