为什么我的 Axios 实例没有在捕获的错误中返回响应？答案

【问题标题】：Why does my instance of Axios not return the response in a caught error?为什么我的 Axios 实例没有在捕获的错误中返回响应？
【发布时间】：2019-06-29 15:41:41
【问题描述】：

我目前正在为 Udemy 讲师 API 创建一个客户端。

我在 Vue 中编写了客户端，使用 Axios 作为我的 HTTP 客户端。

我已将不同的 API 请求抽象为 ES6 化的 API 包装库 (Udemy.js) 中的函数，以便轻松重用它们。

Udemy.js 首先初始化 Axios 的一个实例，然后将使用该实例作为基础的 API 函数导出为 Promise。

以下是从文件中获取的，尽管为了便于阅读，我已经删除了模块导出的所有函数，但其中一个函数除外（并且显然修改了 API 令牌）。端点 URI 包含“message-threadssss”——这是故意的，导致服务器返回 404：

import axios from 'axios';

const token = '***************************';
const axiosOptions = {
  baseURL: 'https://www.udemy.com/instructor-api/v1',
  timeout: 10000,
  headers: {
    Accept: '*/*',
    'Content-Type': 'application/json;charset=utf-8',
    Authorization: `Bearer ${token}`,
  },
};

const axiosInstance = axios.create(axiosOptions);

export default {
  postMessage(messageThreadId, messageBody) {
    return axiosInstance
            .post(`/message-threadssss/${messageThreadId}/messages/`, {
              content: messageBody,
            })
            .then(response => response.data)
            .catch(error => error);
  },
}

UdemyApi.postMessage(threadId, threadReply);
.then((response) => {
        this.isLoading = false;
        this.sentReply = response;
        this.replyBody = '';
        this.$root.$emit('reply-sent', {
          threadId: this.thread.id,
          sentReply: this.sentReply,
        });
      })
      .catch((error) => {
        if (error.response) {
          // Case 1 (Server returned error)
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          // Case 2 (Pre-response error)
          console.log(error.request);
        } else {
          // Case 3 (Mysterious error)
          console.log('Error:', error.message);
        }
        this.$root.$emit('show-snackbar', {
          message: `Failed to send. ${error} `,
          actionText: 'Understood. :(',
        });
        this.isLoading = false;
      });

请求发送没有问题，如果请求成功（即 2xx），Vue 组件可以访问 then() 块中的响应数据。

当服务器返回错误（本例中为 404）时，我希望捕获的错误包含 response 对象（案例 1）。

但是，没有 response 对象返回错误（案例 2），这使我无法正确处理它。当请求确实导致服务器响应 404 错误时会发生这种情况：

HTTP/2.0 404 Not Found
content-type: text/json

我读过如果 Axios 应用了拦截器，可能会导致这个问题，但在这种情况下，我没有应用任何拦截器。

总而言之，我有点茫然。如何将服务器的响应获取到我的 Vue 组件中？

编辑（2 月 6 日）

我没有在我的初始帖子中包含所有有用的控制台输出，所以在这里。执行的 console.log() 行是案例 2 行（仅添加了一个控制台日志条目，不以“错误：”为前缀，如案例 3 中的情况）：

12:22:28.748
XMLHttpRequest
    mozAnon: false
    mozSystem: false
    onabort: null
    onerror: function handleError()
    onload: null
    onloadend: null
    onloadstart: null
    onprogress: null
    onreadystatechange: function handleLoad()
    ontimeout: function handleTimeout()
    readyState: 4
    response: ""
    responseText: ""
    responseType: ""
    responseURL: ""
    responseXML: null
    status: 0
    statusText: ""
    timeout: 100000
    upload: XMLHttpRequestUpload { onloadstart: null, onprogress: null, onabort: null, … }
    withCredentials: false
    <prototype>: XMLHttpRequestPrototype { open: open(), setRequestHeader: setRequestHeader(), send: send(), … }
replybox.vue:72

编辑 2（2 月 6 日）

如果我从 postMessage() 定义中删除 then() 和 catch() 看起来像这样：

 postMessage(messageThreadId, messageBody) {
    return axiosInstance
            .post(`/message-threadssss/${messageThreadId}/messages/`, {
              content: messageBody,
            });
  },

然后简化postMessage() 调用的catch() 块，只输出error 对象，如下所示：

    .catch((error) => {
        console.log(error);
        this.$root.$emit('show-snackbar', {
          message: `Failed to send. ${error} `,
          actionText: 'Understood. :(',
        });
        this.isLoading = false;
      });

控制台输出：

12:38:51.888 Error: "Network Error"
    createError webpack-internal:///./node_modules/axios/lib/core/createError.js:16:15
    handleError webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:87:14
replybox.vue:62

编辑 3（1 月 6 日）

我在之前的编辑中意识到，在我从postMessage 定义中删除了.then 和.catch 之后，我省略了error.request 的输出。如果我将 console.log(error.request); 重新添加到组件中调用的 .catch 块中，则输出如下：

12:58:55.436
XMLHttpRequest
    mozAnon: false
    mozSystem: false
    onabort: null
    onerror: function handleError()
    onload: null
    onloadend: null
    onloadstart: null
    onprogress: null
    onreadystatechange: function handleLoad()
    ontimeout: function handleTimeout()
    readyState: 4
    response: ""
    responseText: ""
    responseType: ""
    responseURL: ""
    responseXML: null
    status: 0
    statusText: ""
    timeout: 100000
    upload: XMLHttpRequestUpload { onloadstart: null, onprogress: null, onabort: null, … }
    withCredentials: false
    <prototype>: XMLHttpRequestPrototype { open: open(), setRequestHeader: setRequestHeader(), send: send(), … }

编辑 4（2 月 6 日）

为了确认或排除我的 API 抽象层的实现，我直接在我的组件中调用了一个 Axios 实例：

const token = '*********************';
const axiosOptions = {
  baseURL: 'https://www.udemy.com/instructor-api/v1',
  timeout: 100000,
  headers: {
    Accept: '*/*',
    'Content-Type': 'application/json;charset=utf-8',
    Authorization: `Bearer ${token}`,
  },
};
const axiosInstance = axios.create(axiosOptions);
axiosInstance
.post(`/message-threadssss/${this.thread.id}/messages/`, {
  content: this.replyBody,
})
.then((response) => {
  this.isLoading = false;
  this.sentReply = response;
  this.replyBody = '';
  this.$root.$emit('reply-sent', {
    threadId: this.thread.id,
    sentReply: this.sentReply,
  });
})
.catch((error) => {
  console.log('Error obj: ', error);
  console.log('Request error obj: ', error.request);
  this.$root.$emit('show-snackbar', {
    message: `Failed to send. ${error} `,
    actionText: 'Understood. :(',
  });
  this.isLoading = false;
  this.axiosResult = error;
});

和以前一样，服务器返回了预期的 404，我的组件中的 .catch 块捕获了错误。

和以前一样，捕获的错误中缺少响应

13:25:45.783 Error obj:  Error: "Network Error"
    createError webpack-internal:///./node_modules/axios/lib/core/createError.js:16:15
    handleError webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:87:14
replybox.vue:79

13:25:45.786 Request error obj:  
XMLHttpRequest
    mozAnon: false
    mozSystem: false
    onabort: null
    onerror: function handleError()
    onload: null
    onloadend: null
    onloadstart: null
    onprogress: null
    onreadystatechange: function handleLoad()
    ontimeout: function handleTimeout()
    readyState: 4
    response: ""
    responseText: ""
    responseType: ""
    responseURL: ""
    responseXML: null
    status: 0
    statusText: ""
    timeout: 100000
    upload: XMLHttpRequestUpload { onloadstart: null, onprogress: null, onabort: null, … }
    withCredentials: false
    <prototype>: XMLHttpRequestPrototype { open: open(), setRequestHeader: setRequestHeader(), send: send(), … }
replybox.vue:80

【问题讨论】：

请发送console.log(error) 以及您收到的消息。
由于the wrong .catch(error => error); 我怀疑您的catch 语句实际上是否被调用。如果是，那很可能是因为前面的 then 回调中的异常
.then(response => response.data) 完全没问题，如果你愿意，你应该保留它。
Axios 会抛出一个Error: "Network Error"，但请求有 status = 0 而不是 404。可能是 CORS 问题，并且不允许您访问响应？
好吧。对我来说，这是一个多么容易被忽视的菜鸟错误。正是这样。返回 2xx 状态时，API 似乎只允许跨域请求。我错误地认为这是一揽子政策。最尴尬的部分是，如果我没有过滤我的控制台，我就会看到这个，这样我就可以专注于我认为是相关的输出。非常感谢您的帮助！

标签： javascript vue.js promise axios es6-modules

【解决方案1】：

我很确定您需要做的就是从您的 postMessage 函数中删除 .then 和 .catch，然后您就可以开始了

postMessage(messageThreadId, messageBody) {
  return axiosInstance
     .post(`/message-threadssss/${messageThreadId}/messages/`, {
        content: messageBody,
      })
}

这样，postMessage 正在返回一个承诺。当你实际调用postMessage 时，你可以使用.then 和.catch

【讨论】：

感谢您的回答艾萨克！我已根据您的建议更新了我的 postMessage 函数。然而，问题似乎仍然存在。我已经用做出改变的结果更新了我的问题。

【解决方案2】：

因此，看起来答案实际上是我调用的 API 没有提供带有错误响应的正确 CORS 标头的结果（因此 CORS 仅允许用于 2xx 响应）。

因此，Axios 无法访问响应。

目前我需要解决一个普遍的模棱两可的错误，但未来的解决方案在于 API 的开发人员为 CORS 提供成功和错误响应。

非常感谢Bergi 的帮助，最终让我找到了问题的原因。

【讨论】：