Vue 컴포넌트에서 Rest API를 호출하려면 어떻게 해야 합니까?

Vue 컴포넌트에서 Rest API를 호출하려면 어떻게 해야 합니까?

이제 막 VueJs를 시작했는데, 데이터가 포함된 원형 차트를 보여 주는 매우 간단한 페이지를 만들려고 합니다.

지금은 예제 데이터를 사용하여 차트를 표시할 수 있었지만, 지금은 백엔드의 api 호출에서 가져온 데이터로 차트를 채우고 싶습니다.http://127.0.0.1:8000/user/getamount.

코드는 다음과 같습니다.

도표.개요

import Vue from "vue/dist/vue.js";
import Vuex from "vuex";
import storePlugin from "./vuex/vuex_store_as_plugin";
import App from './App.vue'
import HighchartsVue from "highcharts-vue";
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(Vuex);
Vue.use(storePlugin);
Vue.config.productionTip = false;
Vue.use(HighchartsVue);
Vue.use(VueAxios, axios)


new Vue({
  el: "#app",
  render: h => h(App),
});

App.vue

<template>
  <div>
    <highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
  </div>
</template>

<script>

export default {
  data() {
    return {
      chartOptions: {
        series: [{

           type: 'pie',
           name: 'Browser share',
           data: [
              ['Firefox',   45.0],
              ['IE',       76.8],
              ['Safari',    8.5],
              ['Opera',     6.2],
              ['Others',   0.7]
           ]
        }],

      }
    };
  }
};
</script>

Vue를 시작한 지 얼마 안 돼서 아직 모르는 게 많은데 API 요청은 어디서 해야 하나요?API를 호출하여 페이지에 데이터를 표시하기 위해 악시스가 사용되는 예는 많이 보았지만, 이 경우 내 컴포넌트에 대한 데이터가 필요합니다. 차트가 있기 때문입니다.컴포넌트에서 콜만 실행하면 되나요?아니면 제가 뭘 놓치고 있는 건가요?어떤 조언이라도 감사합니다.

데이터를 계속 로드하므로 정의하지만 변수를 시작합니다.null:

series: [{
   type: 'pie',
   name: 'Browser share',
   data: null
}],

인created(마크가 붙어 있음)async비동기/비동기 패턴의 경우)를 사용하여 데이터를 로드합니다.axios:

import axios from 'axios';
export default {
  data() {
  ...
  },
  async created() {
    const response = await axios.get(...);  // Load the data from your api url
    this.chartOptions.series[0].data = response.data;  // set the data
    // `response.data` should contain:
    /*
      [
        ['Firefox',   45.0],
        ['IE',       76.8],
        ['Safari',    8.5],
        ['Opera',     6.2],
        ['Others',   0.7]
      ]
    */
  }
}

여기 샌드박스가 있습니다.setTimeout

import axios from 'axios';

 data () {
  return {
    getAmount: []
  }
  },
  methods: {
    fetch() {
        axios.get('https://127.0.0.1:8000/user/getamount')
      .then((response) => {
        this.getAmount = response.data;
      })
    }
  },
  mounted() {
  this.fetch();
  }
})

html로 표시하려면 루프를 만듭니다.

<div v-for="amount in getAmount" :key="amount.id">
{{amount}}
</div>

로드된 데이터가 필요한 함수를 새 구성요소에서 정의하기만 하면 됩니다.네, 차트 컴포넌트의 경우 Axios 요청을 할 수 있습니다.그래서 대본 부분은 이렇게 생겼을 거예요.

<script>
import axios from 'axios';

    export default {
      data () {
        return {
          graph_data: [],
        }
      },
      created () {
        this.fetchGraphData()
      },

      methods: {
        fetchGraphData() {
           axios.get('your_address')
             .then(function (response) {
               //Fill your data here
             })
        }
     }
</script>

언급URL : https://stackoverflow.com/questions/65380841/how-can-i-call-a-rest-api-from-a-vue-component