可重用性:

创建一个文件errorHandler.js:

export const errorHandler = (error) => {
  const { request, response } = error;
  if (response) {
    const { message } = response.data;
    const status = response.status;
    return {
      message,
      status,
    };
  } else if (request) {
    //request sent but no response received
    return {
      message: "server time out",
      status: 503,
    };
  } else {
    // Something happened in setting up the request that triggered an Error
    return { message: "opps! something went wrong while setting up request" };
  }
};

然后，每当您捕捉到axios的错误时:

Just import error handler from errorHandler.js and use like this.
  try {
    //your API calls 
  } catch (error) {
    const { message: errorMessage } = errorHandlerForAction(error);
     //grab message
  }

如果我理解正确的话，您希望只有在请求成功时才调用请求函数，并且希望忽略错误。为此，您可以创建一个新的承诺，在axios请求成功时解决它，并且在失败时绝不拒绝它。

更新后的代码看起来像这样:

export function request(method, uri, body, headers) {
  let config = {
    method: method.toLowerCase(),
    url: uri,
    baseURL: API_URL,
    headers: { 'Authorization': 'Bearer ' + getToken() },
    validateStatus: function (status) {
      return status >= 200 && status < 400
    }
  }


  return new Promise(function(resolve, reject) {
    axios(config).then(
      function (response) {
        resolve(response.data)
      }
    ).catch(
      function (error) {
        console.log('Show error notification!')
      }
    )
  });

}

如果我理解正确的话，您需要某种全局处理程序，这样就不必为所发出的每个请求附加一个catch处理程序。有一个窗口事件叫做unhandledrejection。

您可以在官方文档中阅读有关此事件的更多信息:https://developer.mozilla.org/en-US/docs/Web/API/Window/unhandledrejection_event

下面是如何为这个事件附加一个监听器:

window.addEventListener('unhandledrejection', (event) => {
  // Handle errors here...
});

实际上，这在axios中是不可能实现的。仅在2xx范围内的状态代码可以在.then()中捕获。

一种传统的方法是在catch()块中捕获错误，如下所示:

axios.get('/api/xyz/abcd')
  .catch(function (error) {
    if (error.response) {
      // Request made and server responded
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }

  });

另一种方法是在请求或响应被处理或捕获之前拦截它们。

axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

https://stackabuse.com/handling-errors-with-axios/

    let res = await axios.get('/my-api-route');

    // Work with the response...
} catch (err) {
    if (err.response) {
        // The client was given an error response (5xx, 4xx)
    } else if (err.request) {
        // The client never received a response, and the request was never left
    } else {
        // Anything else
    }
}

try {
    let res = await axios.get('/my-api-route');

    // Work with the response...
} catch (err) {
    if (err.response) {
        // The client was given an error response (5xx, 4xx)
    } else if (err.request) {
        // The client never received a response, and the request was never left
        console.log(err.request);
    } else {
        // Anything else
    }
}

我尝试使用try{}catch{}方法，但它不适合我。然而，当我切换到使用.then(…).catch(…)时，AxiosError被正确捕获，我可以随意使用。当我在设置断点时尝试前者时，它不允许我看到AxiosError，而是告诉我捕获的错误是未定义的，这也是最终在UI中显示的错误。

不知道为什么会这样，我觉得这很微不足道。出于这种原因，我建议使用上面提到的传统的.then(…).catch(…)方法来避免向用户抛出未定义的错误。