axios 加载数据的速度不够快

Question

我一直在尝试使用 axios 通过 Vue 加载数据，但是得到了未定义的错误。我很确定我的代码没有任何问题，因为它适用于另一个人。我认为问题是在 axios 有机会获取数据之前呈现页面。

 async editGoods(oldGoods) {
                oldGoods.property1 = await this.$http.loadData("/item/someporperty/" + oldGoods.id);
                oldGoods.property2 = await this.$http.loadData("/item/otherproperties/list?id=" + oldGoods.id);
                this.isEdit = true;
                this.show = true;
                this.oldGoods = oldGoods;
            }

下面是我的axios配置

import Vue from 'vue'
import axios from 'axios'
import config from './config'

axios.defaults.baseURL = config.api; 
axios.defaults.timeout = 2000; 

axios.loadData = async function (url) {
   const resp = await axios.get(url);
  return resp.data;
}

 Vue.prototype.$http = axios;

这是我不断收到的错误消息：

vue.esm.js?efeb:1741 TypeError: Cannot read property 'length' of undefined
    at eval (eval at ./node_modules/vue-loader/lib/template-compiler/index.js? 
{"id":"data-v-c02e22a2","hasScoped":true,"transformToRequire":{"video": 
["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble": 
{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js? 
type=template&index=0!./src/pages/item/GoodsForm.vue (4.js:276), 
<anonymous>:332:47)
    at Proxy.renderList (vue.esm.js?efeb:3705)
    at Proxy.render (eval at ./node_modules/vue-loader/lib/template- 
compiler/index.js?{"id":"data-v- 
c02e22a2","hasScoped":true,"transformToRequire":{"video": 
["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble": 
{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js? 
type=template&index=0!./src/pages/item/GoodsForm.vue (4.js:276), 
<anonymous>:320:23)
     at VueComponent.Vue._render (vue.esm.js?efeb:4544)
     at VueComponent.updateComponent (vue.esm.js?efeb:2788)
     at Watcher.get (vue.esm.js?efeb:3142)
     at Watcher.run (vue.esm.js?efeb:3219)
     at flushSchedulerQueue (vue.esm.js?efeb:2981)
     at Array.eval (vue.esm.js?efeb:1837)
     at MessagePort.flushCallbacks (vue.esm.js?efeb:1758)

大家可以看一下完整的代码here和here。 GoodsForm.vue 是被渲染的表单。

已经尝试了几天，有人知道如何处理吗？

Answer 1

如果您想在 axios 获取您的数据后立即显示数据，一种方法是根据您的数据模型的值为您的组件设置一个 if 条件。喜欢这个。

在您的数据中，您可以声明为新数据，比如说 is_load

data() {
   return {
      is_loaded:false
   }
}

现在在您的组件中，您应该应用一个条件来防止组件在 axios 未完成获取时加载。像这样

<template>
     <div v-if="is_loaded">
         ...
         ...
     </div>
</template>

然后在您的 axios 中，您可以将 is_load 的值更改为 true 以加载您的组件，因为 axios 已经获取了您的数据。像这样

 axios.get('api endpoint', {})
      .then(({data}) => {
       ...
       ...
      this.is_loaded = true
 );

注意：当您已经通过响应完成初始化数据模型时，您必须将其设置为 true。