如何使用 axios vuejs 处理异步函数

Question

为了重构代码，我将其拆分为三个文件

当我有方法 getUsers 时的Users.vue

getUsers() {
      this.isLoading = true
      this.$store
        .dispatch('auth/getValidToken')
        .then((data) => {
          this.$store
            .dispatch('user/fetchUsers', data.jwt)
            .then((response) => {
              console.log('DATA RESPONSE 2', response)
              this.items = response
              this.isLoading = false
            })
            .catch((error) => {
              console.log(error)
            })
        })
        .catch((error) => {
          this.$router.push('/pages/login')
          console.log(error)
        })
    },

当我有动作时的user.js

fetchUsers(context, jwt) {
    return UserService.getUsers(jwt)
  },

当我有一个调用 api 的函数时，还有 UserServices.js

async getUsers(jwt) {
    apiUsers.defaults.headers.common['jwt'] = jwt
    await apiUsers.get('/users').then((response) => {
      console.log('DATA RESPONSE 1', response.data)
      let data = response
      return data
    })
  },

如您所见，我将控制台日志消息用于跟踪 api 响应

DATA RESPONSE 1 向我展示了我期望的带有用户数据的对象，但是... DATA RESPONSE 2 显示一条消息“未定义”

我是 vuejs 的初学者，如果有任何帮助，我将不胜感激

Answer 1

你需要从getUsers()返回Promise。

类似：

async getUsers(jwt) {
    apiUsers.defaults.headers.common['jwt'] = jwt
    return await apiUsers.get('/users').then((response) => {
      console.log('DATA RESPONSE 1', response.data)
      let data = response
      return data
    })
},

请注意：你没有很好地使用asyncawait，例如，不需要等待上面getUsers()中的响应你可以简单地返回，而你可以在你的@下使用async/await Users.vue 的 987654326@。