使用 Axios 而不是获取 Vue App 的 http get 请求

Question

下面的 vue 应用程序应该使用 fetch 方法从 firebase 实例中获取一些数据并将数据显示在页面上。

UserExperiences.vue

<script>
import SurveyResult from './SurveyResult.vue';
//import axios from 'axios';

export default {
  components: {
    SurveyResult,
  },
  data() {
    return{
      results: []
    }
  },
  methods:{
    loadExperiences() {
      fetch('https://***.firebaseio.com/surveys.json')
      //axios.get('https://***.firebaseio.com/surveys.json')
      .then((response) => {
        if(response.ok) {
          return response.json();
        }
      })
      .then((data) => {
        const results = [];
        for (const id in data) {
          results.push({ 
            id: id, 
            name: data[id].name,
            rating: data[id].rating 
          });
        }
        this.results = results;
      });
    },
  },
};
  // mounted(){
  //   axios.get('https://***.firebaseio.com/surveys.json').then(response => {      
  //     this.results = response.data;
  //   })
  // },
</script>

SurveyResult.vue

<template>
  <li>
    <p>
      <span class="highlight">{{ name }}</span> rated the learning experience
      <span :class="ratingClass">{{ rating }}</span>.
    </p>
  </li>
</template>

<script>
export default {
  props: ['name', 'rating'],
  computed: {
    ratingClass() {
      return 'highlight rating--' + this.rating;
    },
  },
};
</script>

数据在使用fetch方法的网页上正确呈现在网页上。有没有办法改用 axios.get ？我试过使用已安装的 vue 属性，它让数据以 json 格式出现在空白屏幕上，但我希望数据使用样式和其他 vue 组件呈现在网页上在一起。

根据上下文，页面应如下所示：

Answer 1

只要您对结果（您的 results.push({ ... }) 部分）进行相同的转换，您应该会得到相同的结果。

你可以这样简化它

axios.get("https://***.firebaseio.com/surveys.json")
  .then(({ data }) => {
    this.results = Object.entries(data).map(([ id, { name, rating } ]) => 
      ({ id, name, rating }));
  });

使用 Axios 而不是获取 Vue App 的 http get 请求

Using Axios instead of fetch for http get requests with Vue App

javascript

vue.js

firebase-realtime-database

fetch-api

axios