Question

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

这是我的组件：

<label>Ime Profesora</label>
<br/>
<input type='text' id='profesor_Ime' placeholder='Ime profesora...' />
<br/>
<input type='submit' id='profesor_Submit' value='Dodaj Profesora' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

我的问题是：我找不到办法处理用户输入github中不存在的用户的情况。使用axios promise的<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>块，我希望将错误记录到控制台，但事实并非如此。我希望能够处理这种情况的原因是，当没有搜索任何内容或者进行了无效搜索时，我不想要占位符文本catch。

我尝试使用() is from !代替data.length进行data检查，但在这种情况下，似乎我的组件没有“反应”;我可以在Vue dev工具中看到数据更改，但在组件中看不到。这可能会发生什么？

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

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

中的

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变量，您可以根据您的要求进行适当的更改。

Answer 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

vue-axios`catch`函数在预期时不会触发

2 个答案: