Question

我正在使用Vue.js Vue-Apollo并启动用户突变以登录用户。我正在使用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）在eval（eval at（app.js：1353），：139：33）在

知道如何在catch()

中显示响应中的错误

我可以在网络标签上看到我想要向用户显示的错误：

......但我无法弄明白该怎么做。

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

Answer 1

所以，看起来好像我是通过咆哮错误的树来处理错误的方法。

答案的关键是检查.catch()与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（我不太确定），但我希望这最终能帮助某人陷入类似的境地！

Answer 2

我可能会误解你的问题，所以请注释并纠正我，如果我，但看起来你的Promise可能比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 {};
    })
}

在Vue.js中向用户显示Apollo变异错误？

2 个答案: