如何为Axios请求同时配置.then()成功回调与.catch()错误捕获

直接给你调整后的完整Axios POST请求代码，实现成功显示成功提示、错误捕获并显示错误提示的逻辑：

// 基于你的现有请求结构补充完整的.then()和.catch()处理
axios.post('/your-api-endpoint', {
  // 这里填写你的请求参数
  username: 'example',
  password: '123456'
})
.then(response => {
  // 请求成功时执行的代码，替换成你实际的成功提示逻辑
  console.log('请求返回数据:', response.data);
  alert('操作成功！'); // 可替换为UI组件的提示，比如Message.success('操作成功')
})
.catch(error => {
  // 捕获所有请求错误场景
  console.error('请求错误详情:', error);
  // 生成针对性的错误提示语
  let errorTip = '操作失败，请稍后重试';
  if (error.response) {
    // 后端返回非2xx状态码时，优先取后端返回的错误信息
    errorTip = error.response.data.msg || errorTip;
  } else if (error.request) {
    // 发送请求后无响应（如网络中断）
    errorTip = '网络连接异常，请检查网络状态';
  }
  alert(errorTip); // 替换为你实际的错误提示组件
});

核心说明： #

• .then() 触发逻辑：只有当请求返回2xx范围的HTTP状态码时，才会进入该回调执行成功提示，不会和错误逻辑冲突。
• .catch() 覆盖范围：包含所有请求异常场景——网络错误、请求超时、后端返回4xx/5xx状态码等全部能被捕获。
• 错误信息优化：通过error.response和error.request可以区分不同错误类型，给用户更精准的提示。

如果你的现有代码已有部分结构，只需把指定的.then()代码片段插入到axios.post()之后，再追加.catch()即可，保证链式调用顺序正确即可。

内容的提问来源于stack exchange，提问作者Henryy