vue-axios `catch` 函数未按预期触发答案

【问题标题】：vue-axios `catch` function doesn't trigger when expectedvue-axios `catch` 函数未按预期触发
【发布时间】：2017-05-29 10:23:08
【问题描述】：

我在单个文件组件中有一个 Vue 应用程序，它允许用户查找 github 用户名并查看用户的全名、登录名和国家/地区。

这是我的组件：

<template>
  <div id="app">
    <form @submit.prevent="search">
      <input v-model="username" />
    </form>
    <p v-if="data">
      {{ data.name }} ({{ data.login }})
      is from
      {{ data.location }}!
    </p>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

export default {
  data() {
    return {
      username: '',
      data: []
    }
  },

  methods: {
    search() {
      const api = `https://api.github.com/users/${this.username}`

      Vue.axios.get(api).then((response) => {
        this.data = response.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

我的问题是：我找不到一种方法来处理用户输入 github 中不存在的用户的情况。使用 axios 承诺的 catch 块，我希望将错误记录到控制台，但事实并非如此。我希望能够处理这种情况的原因是，当没有搜索任何内容或进行了无效搜索时，我不希望占位符文本() is from !。

我尝试使用data.length 而不是仅使用data 进行v-if 检查，但在这种情况下，我的组件似乎没有“反应”；我可以在 Vue 开发工具中看到数据变化，但在组件中看不到。这里会发生什么？

这是该应用的 webpackbin 演示：http://www.webpackbin.com/VJlfcrGLM

【问题讨论】：

标签： promise vuejs2 vue.js axios

【解决方案1】：

您的代码似乎运行良好，当用户不存在时，它实际上进入了catch 块。

检查工作 webpackbin here.

我创建了一个新变量 errorMsg 并在 catch 块中分配了这个：this.errorMsg = 'user does not exist'，并按如下方式更改了 HTML 以在视图中显示：

在 HTML 中

<p v-if="!errorMsg">
  {{ data.name }} ({{ data.login }})
  is from
  {{ data.location }}!
</p>
<p v-if="errorMsg">
  {{ errorMsg }}
</p>

在 Vue 实例中

search() {
  const api = `https://api.github.com/users/${this.username}`

  Vue.axios.get(api).then((response) => {
    this.data = response.data
    this.errorMsg = null
  }).catch(error => {
    this.errorMsg = 'User does not exist'
    console.log(error)
  })
}

您可以看到这实际上是在 catch 块中并相应地分配 errorMsg 变量，您可以根据您的要求进行适当的更改。

【讨论】：

这个答案相当混乱。 • 为什么支票从data 改为data.name？ • 如果您搜索name 为null 的用户，则会显示数据对象而不是预期的错误消息。 • 在Webpackbin 示例中，promise 的then 和catch 部分都使用了类似的控制台错误。那里发生了什么？ • Webpackbin 示例似乎没有为我加载，但它没有错误。 • 为什么将data 设置为错误消息，而不是仅在data 中设置errorMsg 值并将该值用于else 块？

【解决方案2】：

要使用 axios 处理错误，您需要将 '.response' 放入错误变量中。像这样：

import axios from 'axios

axios.get(...)
    .then((data) => {
        //code
    })
    .catch((error) => {
        console.log(error.response);
        var aux = error.response //You assign the error data to aux
        //In error.response you have the data
        //error give you only the error message
    })

https://github.com/mzabriskie/axios#handling-errors

同样的方法，你可以在没有 VueAxios 的情况下使用 axios。

使用 vue axios，您需要使用 '.data'。而不是“.response”

https://github.com/imcvampire/vue-axios#usage

【讨论】：