从VueJS中的api获取数据时如何添加加载器？ [复制]

Posted 2023-02-22

【中文标题】从VueJS中的api获取数据时如何添加加载器？ [复制]

【英文标题】：How to add loader when data is fetched from api in VueJS? [duplicate]

【发布时间】：2021-04-15 22:21:22

【问题描述】：

我创建了一个 VueJS/Vuex 应用程序来从 API 获取数据并将这些数据显示在另一个页面上， 本站的逻辑是用户点击按钮获取first页面上的数据但是这个数据必须显示在另一个页面上，

这是我的代码：

data.js

import axios from 'axios';

const state = 
    data: ''
;

const getters = 
    getData: (state) => 
        return state.data;
    
;

const actions = 
    async fetchData( commit ,  id ) 
        const response = await axios.get(`http://someUrl?id=$id`);
        console.log(response.data);
        commit('setData', response.data);
    


const mutations = 
    setData: (state, data) => (state.data = data)


export default 
    state, getters, actions, mutations

我要获取此数据的 Vue 文件：

<script>
  import FooterComponent from "@/components/Footers/Footer.vue";

  import  mapGetters, mapActions  from 'vuex';

  export default 
    data() 
      return 
        id: ""
      
    ,
    name: "Index",
    methods: 
      ...mapActions(["fetchData"]),
      launchFetchData() 
        this.fetchData( id: this.id)
        this.$router.push("login");
      
    ,
    computed: mapGetters(["getData"])
  
</script>

那么，如何通过状态检查数据是否已正确下载，以及如何在数据已正确下载后重定向到相应的页面？以及如何在数据下载时添加简单的loader？

感谢您的帮助

【参考方案1】：

我不确定，但你能试试这个吗？

<script>
  import FooterComponent from "@/components/Footers/Footer.vue";

  import  mapGetters, mapActions  from 'vuex';

  export default 
    data() 
      return 
        id: "",
        data: null
      
    ,
    name: "Index",
    methods: 
      launchFetchData() 
        try 
         ...mapActions(["fetchData"]),
        this.fetchData( id: this.id)
        this.data = mapGetters(["getData"])
        this.$router.push("login");
         catch (error) 
        console.log(error)
        
      
    ,
   mounted() 
      this.launchFetchData()
  
</script>

【讨论】：

我还添加了 trycatch 语法，以确保出现错误时不会被重定向。所以错误会显示在控制台中。