привязать обещание к компоненту в Vue

App.vue

<template>
  <v-app>
    <v-main>
      <Header :token="token" :users="users"/>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>
import Header from './components/layout/Header'
import axios from 'axios';

export default {
  name: 'App',
  components: {
    Header
  },
  data() { 
    return { token: null, users: [] };
  },
  created(){
    this.token = this.getToken();
    this.users = this.getUsers();
  },
  methods:{
    getToken(){
      axios.get("http://someURL.com")
        .then(res => {
          console.log("token = ", res)
          return res;
        });
    },
    getUsers(){
      axios.get("http://someURL.com")
        .then(res => {
          let users = res.data.map(({username}) => username);
            console.log("users = ", users)
            return users;
        });
    }
  }
};
</script>

Заголовок.vue

<template>
    <header class="header">
        <v-toolbar dark>
            <h1>TITLE</h1>
            
            <v-spacer></v-spacer>

            <div>
                <router-link to="/">Home</router-link> |
                <router-link to="/about">About</router-link>
            </div>
        </v-toolbar>

        <p v-if="users">{{users}}</p>
        <p v-else>No Data</p>

    </header>
</template>

<script>
export default {
    name:"Header",
    props: ['token', 'users'],
    data: () => ({
    }),
    mounted(){
        this.onStart();
    },
    methods:{
        onStart(){
            console.log("insideHeader = ", this.users)
        }
    }
}
</script>

<style scoped>
    #nav{
        float: right;
    }
    .header a{
        color: #fff;
        padding-right: 5px;
        text-decoration: none;
    }
</style>

Итак, в чем моя проблема: я извлекаю некоторые данные из App.vue с помощью axios, а затем привязываю эти данные к Header.vue. Поэтому, когда приложение сначала загружается, связанное значение будет неопределенным, только через некоторое время данные извлекаются из API. Но даже тогда значение остается неопределенным в заголовке. Любые решения?


vue.js axios vuejs3
person Thamjith Thaha    schedule 17.12.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Не пытайтесь вернуть значение из обратного вызова обещания, вы можете использовать async/await для возврата ответа:

<template>
  <v-app>
    <v-main>
      <Header :token="token" :users="users"/>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>
import Header from './components/layout/Header'
import axios from 'axios';

export default {
  name: 'App',
  components: {
    Header
  },
  data() { 
    return { token: null, users: [] };
  },
  created(){
    this.token = this.getToken();
    this.users = this.getUsers();
  },
  methods:{
    async getToken(){
     let res=await axios.get("http://someURL.com")
       
          console.log("token = ", res)
          return res.data;
      
    },
   async getUsers(){
     let res=await axios.get("http://someURL.com")
       
          let users = res.data.map(({username}) => username);
            console.log("users = ", users)
            return users;
       
    }
  }
};
</script>
person Boussadjra Brahim    schedule 17.12.2020

arrow_upward
1
arrow_downward

Вызовы API асинхронны по своей природе. следовательно, используйте async/await..

<template>
  <v-app>
    <v-main>
      <Header :token="token" :users="users"/>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>
import Header from './components/layout/Header'
import axios from 'axios';

export default {
  name: 'App',
  components: {
    Header
  },
  data() { 
    return { token: null, users: [] };
  },
  async created(){
    this.token = await this.getToken();
    this.users = await this.getUsers();
  },
  methods:{
    getToken(){
      return axios.get("http://someURL.com")
        .then(res => {
          console.log("token = ", res)
          return res.data;
        });
    },
    getUsers(){
      return axios.get("http://someURL.com")
        .then(res => {
          let users = res.data.map(({username}) => username);
            console.log("users = ", users)
            return users;
        });
    }
  }
};
</script>
person Nilesh Patel    schedule 17.12.2020