ax ios недостаточно быстро для загрузки данных - PullRequest
0 голосов
/ 23 января 2020

Я пытался использовать ax ios для загрузки данных с Vue, но получил Undefined error. Я почти уверен, что в моем коде нет ничего плохого, потому что он работает с другим человеком. Я думаю, что проблема в том, что страница отображается раньше, чем у Ax ios была возможность получить данные.

 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;
            }

ниже - мой топор ios конфигурация

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)

Можно посмотреть в полном коде здесь и здесь . GoodsForm. vue это форма, которую вы визуализируете.

пытались заставить ее работать несколько дней, кто-нибудь знает, как с этим справиться?

1 Ответ

2 голосов
/ 23 января 2020

Если вы хотите отобразить данные сразу после того, как топор ios извлек ваши данные, один из способов сделать это - поставить условие if, если ваша компонента базируется на значении вашей модели данных. как для этого.

в ваших данных вы можете объявить как новые данные, скажем, is_load

data() {
   return {
      is_loaded:false
   }
}

теперь в вашем компоненте вы должны применить условие, чтобы компонент не загружался, а топор ios не Фини sh для получения. например,

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

, тогда в вашем топоре ios вы можете изменить значение is_load на true, чтобы загрузить ваш компонент, поскольку топор ios уже получил ваши данные. как это

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

примечание: вы должны установить значение true, когда вы уже закончили инициализацию своей модели данных своим ответом.

...