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

在我得到的承诺中，除其他外，

用户：(15) [{…}, {…}, {…}, {…}…,

所以调用确实有效。 在表格的脚本中（我需要显示这些数据）我做了：

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)
    },

控制台上的输出：

用户：(15) [{…}、{…}、{…}、{…}、{…}、…、__ob__：观察者] index.vue:57 响应：未定义

在我做的模板中：

<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[] 填充，我得到：

用户：[__ob__：观察者]

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 表：

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

Answer 2

问题确实在于 vuejs 正确渲染表格。 我做了什么：

<b-table
     :fields="fields"
     :items="users"
     v-if="users && users.length > 0"
     class="mx-2 py-1 tbl-user-list"
     >
    <tbody> 
      <template slot="utente" slot-scope="data">{{ data.item.username }}</template>
      <template slot="stato" slot-scope="data">{{ data.item.is_active }}</template>
      <template slot="operazioni">
        <b-button-group class="my-1">
          <b-button
            variant="success"
            class="p-2"
            v-b-tooltip.hover title="Vedi attività utente"
            @click="vediAttivita"
          >
            <span class="svg-container">
              <svg-icon icon-class="eye-open" />
            </span>
          </b-button>
          <b-button
            variant="info"
            class="p-2"
            v-b-tooltip.hover title="Vedi profilo utente"
            @click="vediProfilo"
          >
            <span class="svg-container">
              <svg-icon icon-class="user" />
            </span>
          </b-button>
          <b-button
            variant="warning"
            class="px-2 mr-1 py-1"
            v-b-tooltip.hover title="Modifica profilo utente"
            @click="modificaProfilo"
          >
            <span class="svg-container">
              <svg-icon icon-class="edit" />
            </span>
          </b-button>
        </b-button-group>
      </template>
  </tbody>

在脚本中，我以不同方式定义了字段。 Key 是用来获取数据的字段，label 是要显示的内容。

fields: [
  { key: 'username', label: 'utente' },
  { key: 'email', label: 'email'}
  { key: 'is_active', label: 'stato'}
  { key: 'date_joined', label: 'iscritto_il'}
  { key: 'last_login', label: 'ultimo_accesso'}
]

这很有效！答案来自 vuejs 论坛，这里是链接：https://forum.vuejs.org/t/template-is-acting-weird-with-v-for-directive/71378/4 感谢任何花时间解决它的人。