Подождите, пока данные ответа Ajax в Vue.js

Question

Подождите, пока данные ответа Ajax в Vue.js

Просто обработайте событие Move или переопределите OnMove, чтобы убедиться, что окно находится на рабочем столе:

protected override OnMove(EventArgs e)
{
    if (Screen.PrimaryScreen.WorkingArea.Contains(this.Location))
    {
        this.Location = Screen.PrimaryScreen.WorkingArea.Location;
    }
}

0

javascript vue.js axios

задан Souvik Ghosh 13 July 2018 в 09:32

5 ответов

Другие вопросы по тегам:

javascript vue.js axios

Похожие вопросы:

score 0 · Answer 1

Вам нужно вернуть обещание с вашего запроса

<template>
<div>
    This is Default child component
    {{tools[0].name}}
</div>
</template>

<script>
import { CustomJS } from '../js/custom.js';

export default {
  name: 'HomeContent',
  props: {
      tools: []
  },
  methods: {
      fetchData() {
         const customJs = new CustomJS();
         return new Promise((resolve, reject) => {
             customJs.getTools()
                 .then(res => resolve(res))
                 .catch(err => reject(err))
        })
     }
  },
  created() {
      this.fetchData().then(res => {
         this.tools = res);
      } //preferably need to wait here wait for response
    }
   }
 </script>

0

ответ дан Dionisis Karakasiliotis 17 August 2018 в 13:16

1

Также было бы возможно вернуть обещание от вызова axios в реализации getTools. Тогда вам не придется обертывать это другим обещанием – Eddo 13 July 2018 в 10:13
2

Извините, похоже, есть синтаксическая ошибка, и этот код дает ошибку сборки. – Souvik Ghosh 13 July 2018 в 12:20
3

– Dionisis Karakasiliotis 13 July 2018 в 13:09

score 0 · Answer 2

Попробуйте получить данные о смонтированных

    <template>
        <div>
            This is Default child component
            {{tools[0].name}}
        </div>
    </template>

    <script>
    import { CustomJS } from '../js/custom.js';

    export default {
      name: 'HomeContent',
      props: {
        tools: []
      },
      methods: {
          fetchData() {
            const customJs = new CustomJS();
            return customJs.getTools();
          }
      },
      mounted: function () {
        this.tools = this.fetchData();    
        // or    
        // const customJs = new CustomJS();
        // this.tools =  customJs.getTools();
      }
    }
    </script>

0

ответ дан Hardik 17 August 2018 в 13:16

1

Нет, это не сработало. – Souvik Ghosh 13 July 2018 в 12:18
2

любая ошибка в консоли браузера? – Hardik 14 July 2018 в 07:01
3

tools не определено, как и раньше – Souvik Ghosh 14 July 2018 в 14:17
4

возможно, вам нужно назначить новый источник данных tools из родительского компонента. можете ли вы, пожалуйста, поделиться plunkr или образец для того же – Hardik 14 July 2018 в 14:21

score 0 · Answer 3

Что вы хотите сделать, так это определить функцию getTools как обещание следующим образом:

getTools (id = 0) {
  return new Promise((resolve, reject) => {
    this.apiTool += (id > 0) ? id : '';
    axios.get(this.apiTool, {
    })
    .then(function (response) {
        console.log(response.data);
        resolve(response.data);
    })
    .catch(function (error) {
        console.log(error);
        reject(error)
    });
  })
}

Тогда вы можете использовать его в своем коде компонента как:

<template>
    <div>
        This is Default child component
        {{tools[0].name}}
    </div>
</template>

<script>
import { CustomJS } from '../js/custom.js';

export default {
  name: 'HomeContent',
  props: {
    tools: []
  },
  methods: {
      fetchData() {
        const customJs = new CustomJS();
          customJs.getTools().then((result) => {
            return result;
          }
        )

      }
  },
  created() {
    this.tools = this.fetchData(); //preferably need to wait here wait for response
  }
}
</script>

Или используя async / wait:

<template>
    <div>
        This is Default child component
        {{tools[0].name}}
    </div>
</template>

<script>
import { CustomJS } from '../js/custom.js';

export default {
  name: 'HomeContent',
  props: {
    tools: []
  },
  methods: {
      async fetchData() {
      const customJs = new CustomJS();
      return await customJs.getTools()  
      }
  },
  created() {
    this.tools = this.fetchData(); //preferably need to wait here wait for response
  }
}
</script>

Пробовал свой код. Первый подход tools не определен, но ответ регистрируется внутри fetchData(). Второй подход. Я получаю Promise<pending> внутри created в своей консоли и вижу значения, когда я расширяю его до PromiseValue. — Souvik Ghosh, 13 July 2018 в 12:31

score 0 · Answer 4

<template>
    <div v-if="isGetTools">
        This is Default child component
        {{tools[0].name}}
    </div>
</template>

<script>
import { CustomJS } from '../js/custom.js';

export default {
  name: 'HomeContent',
  props: {
    tools: []
  },
  data: function () {
    return {
      isGetTools: false
    }
  },
  methods: {
      fetchData() {
        const customJs = new CustomJS();
        this.tools = customJs.getTools();
        this.isGetTools = true;
      }
  },
  created() {
    this.fetchData(); //preferably need to wait here wait for response
  }
}
</script>

Попробуйте добавить v-if в свой div. И обновите isGetTools до true после получения результата от AXIOS

score 1 · Answer 5

Попробуйте использовать код ниже: поэтому код будет отображаться только тогда, когда его фактически загруженный

<div v-if="tools">
    This is Default child component
    {{tools[0].name}}
</div>

1

ответ дан Surya Neupane 17 August 2018 в 13:16

1

При этом содержимое внутри div не загружается. – Souvik Ghosh 13 July 2018 в 12:16