4

我正在将Vue.js与Vue-Apollo一起使用，并启动 User 突变以登录用户。我正在使用 graph.cool 服务。

我有一个请求管道功能设置来捕获一些错误，例如无效的电子邮件。

当使用错误/无效输入发出请求时，我的错误catch()会触发（如预期的那样），并且在网络选项卡中，我可以看到自定义错误消息的 JSON。但是，如果从 graph.cool 触发错误，我如何从 catch 中访问这些错误/响应？

例子：

signin () {
  const email = this.email
  const password = this.password

  this.$apollo.mutate({
    mutation: signinMutation,
    variables: {
      email,
      password
    }
  })
  .then((data) => {
    // This never fires on an error, so I can't 
    // show the user the errors in the network repsonse.
    console.log(data) 
  })
  .catch((error) => {
    // Error in this part fires in the console 
    // but I'm unable to show the JSON response 
    // errors because the 'then()' above doesn't execute.
    console.error(error)
  })
}

对于无法识别的用户，我收到以下错误：

错误：GraphQL 错误：在新 ApolloError (eval at (app.js:956), :34:28) at eval (eval at (app.js:1353), :139:33) at

知道如何从内部显示响应中的错误catch()吗？

我可以从字面上看到我想在网络选项卡上的响应中向用户显示的错误：

在此处输入图像描述

...但我不知道该怎么做。

非常感谢任何帮助！谢谢你。

4

2 回答 2

6

所以，看起来我好像是在用错误的方式处理这个问题，叫错了树。

答案的关键是检查.catch()with中的错误console.dir(error)。这揭示了一些有用的键......即：

error.graphQLErrors[0]

总而言之，更正后的代码如下所示：

signin () {
  const email = this.email
  const password = this.password

  this.$apollo.mutate({
    mutation: signinMutation,
    variables: {
      email,
      password
    }
  })
  .then(data => {
    console.log(data)
  })
  .catch(error => {
    console.log(graphQLErrorMessages(error))
  })
}

该graphQLErrorMessages()函数是我编写的一个助手，以便我可以在其他.catch()块中重用它：

function graphQLErrorMessages (errorsFromCatch) {
  const errors = errorsFromCatch.graphQLErrors[0]
  const messages = []

  if (errors.hasOwnProperty('functionError')) {
    const customErrors = JSON.parse(errors.functionError)
    messages.push(...customErrors.errors)
  } else {
    messages.push(errors.message)
  }

  return messages
}

它返回一组错误消息（这是我需要的），但您可以按照自己喜欢的方式对其进行格式化。

它的逻辑可能有点https://graph.cool特定（我不太确定），但我希望这最终能帮助也陷入类似情况的人！

于 2017-07-20T16:34:00.623 回答
-1

我可能误解了你的问题，所以如果我是，请发表评论并纠正我，但看起来你可能在使用 Promises 时遇到问题，而不是使用 Vue 或 GraphQL。

就像在try...catch语句中一样，一旦你发现一个错误，你的程序将继续执行，除非你重新抛出错误。例如：

这抓住了

try { 
  codeThatThrowsAnError();
} catch(e) {
  // Do Nothing
}

这重新抛出

try { 
  codeThatThrowsAnError();
} catch(e) {
  throw new Error("Err 135: I failed")
}

同样，在 Promise 领域，您可以像示例中那样捕获错误并移动，也可以重新抛出。您可能缺少的是从 catch 语句返回的任何内容都将在下一个中使用then。例如：

somethingReturningAFailedPromise()
  .then(doWork)
  .catch((err) => {
    return "I'm a New Value"
  })
  .then(console.log)

//=> "I'm a New Value"

在我看来，您需要的是一种对故障更具弹性的数据函数，如下所示：

const getUserProfile = (id) => {
  return fetchUserData(id)
    .catch((err) => {
      logError(err);
      return {};
    })
}
于 2017-07-20T06:13:02.570 回答