javascript - axios 获取响应未定义

Question

我正在尝试使用来自服务器的用户填充 vuebootstrap 表。 我这样调用 api:

export function getUsers() {
  const a = request({
    url: 'http://localhost:8000/users/',
    method: 'get'
  })
  console.log('getUsers request: ', a)
  return a 
}

我将它包装在一个 const 中只是为了调试。

控制台的输出是:

getUsers request:  Promise {<pending>}

在我得到的 promise 中，除其他外，

users:  (15) [{…}, {…}, {…}, {…}...,

So the call is indeed working. In the script of the table (where I need these data to be displayed) I did:

import { getUsers } from '@/api/user'
data() {
    return {
      users: [],
      fields: [ 'utente', 'email', 'stato', 'iscritto_il', 'ultimo_accesso', 'operazioni' ]
    }
  },
  created() {
    this.fetchUsers()
  },
  methods: {
    async fetchUsers() {
      await getUsers().then((response) => this.users = response.results)

      .catch((error) => console.log('ERROR: ', error.message))

      console.log('users: ', this.users)
      console.log('response: ', this.response)
    },

控制台输出:

users:  (15) [{…}, {…}, {…}, {…}, {…},..., __ob__: Observer]
index.vue:57 response:  undefined

In the template I did:

<div>
    <app-container title="Lista utenti" />
      <b-table
        :items="users"
        :fields="fields"
        class="mx-2 py-1 tbl-user-list"
      >
      <template 
        v-for="(user, index) in users"
        slot-scope="row"
      >
        {{ row.user.username }}
        {{ row.user.email }}
        {{ row.user.is_active }}
        {{ row.user.date_joined }}
        {{ row.user.last_login }}
      </template>
      <template slot="operazioni">
        <b-button-group class="my-1">
          <b-button variant="success" class="p-2" @click="vediAttivita">Vedi Attività</b-button>
          <b-button variant="info" class="p-2" @click="vediProfilo">Vedi Profilo</b-button>
          <b-button variant="warning" class="px-2 mr-1 py-1" @click="modificaProfilo">Modifica Profilo</b-button>
        </b-button-group>
      </template>
    </b-table>
  </div>

奇怪的是，只显示了电子邮件(以及操作模板，如果重要的话)，但没有其他内容。怎么会收到电子邮件(但是，如果我 console.log 它们也变得未定义)？

感谢任何能给我一些提示的人。

我在网上到处查了，我可以看出这是一个常见问题，所以它可以看作是重复的，但我尝试了所有的解决方案，但没有一个对我有用。我尝试以任何可能的方式响应，以及数据，我尝试在使用它们之前定义它们，但它仍然未定义。

我读到 .then 和 async wait 不应该一起使用，但是如果我删除 async wait 我不会得到 users[] 填充，我得到:

users:  [__ob__: Observer]

Answer 1

如果您在函数中使用request，那么您应该使用acync-await 或带有promise 的回调函数:

export function getUsers() {
  return new Promise((resolve, reject) => {
     request({
      url: 'http://localhost:8000/users/',
      method: 'get'
     }, function(err, response, body) {
      if(err) {
      reject(err)
    }
    console.log("response: ", response)
    console.log("body: ", body)
    resolve(body)
  })
 })
} 

在你的方法中它应该是这样的:

async fetchUsers() {
      try {
          const result = await getUsers();
          this.users = result //or result.data
          console.log('users: ', this.users)
          console.log('response: ', result)
      } catch(err) {
          console.log(err)
      }
    },

此外，由于用户数据将通过 async 请求，因此最好使用 v-if 包装 b-table:

<b-table v-if="users && users.length > 0"
        :items="users"
        :fields="fields"
        class="mx-2 py-1 tbl-user-list"
      >
      <template 
        v-for="(user, index) in users"
        slot-scope="row"
      >
        {{ row.user.username }}
        {{ row.user.email }}
        {{ row.user.is_active }}
        {{ row.user.date_joined }}
        {{ row.user.last_login }}
      </template>
      <template slot="operazioni">
        <b-button-group class="my-1">
          <b-button variant="success" class="p-2" @click="vediAttivita">Vedi Attività</b-button>
          <b-button variant="info" class="p-2" @click="vediProfilo">Vedi Profilo</b-button>
          <b-button variant="warning" class="px-2 mr-1 py-1" @click="modificaProfilo">Modifica Profilo</b-button>
        </b-button-group>
      </template>
    </b-table>