将承诺绑定到 Vue 中的组件答案

【问题标题】：bind a promise to component in Vue将承诺绑定到 Vue 中的组件
【发布时间】：2021-03-28 04:09:08
【问题描述】：

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>

Header.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>

所以基本上我的问题是，我使用 axios 在 App.vue 上获取一些数据，然后在 Header.vue 上绑定该数据，所以当应用程序首先加载时，绑定的值将是未定义的，只有在一段时间后数据从 API 中获取。但即便如此，该值在 Header 中仍未定义。有什么解决办法吗？

【问题讨论】：

标签： vue.js axios vuejs3

【解决方案1】：

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>

【讨论】：

【解决方案2】：

不要试图从 promise 回调中返回值，你可以使用 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>

【讨论】：