Vue.js页面内联后HTTP请求直接进入Promise的catch而非then求助

以下是几种常见原因及对应解决办法：

• HTTP状态码非2xx触发错误捕获
  Vue的$http（通常是vue-resource）默认会将状态码≥400的响应判定为错误，直接进入catch。先在catch中打印完整错误信息定位问题：

  .catch((error) => {
    console.log('错误状态码:', error.status);
    console.log('响应详情:', error.response);
    vm.$hms.loading.hide();
  });
  

  如果是404（地址错误）、401（权限不足）这类情况，需核对接口地址正确性、权限配置；若为跨域场景，可在请求配置中添加emulateHTTP: true适配服务器请求方法限制。

• 跨域请求限制
  内联页面容易出现跨域问题，浏览器会直接阻断请求并触发catch。打开浏览器Network面板，检查请求是否有OPTIONS预检失败或跨域报错：

  • 后端需配置CORS规则，允许当前页面域名的访问权限
  • 开发环境可通过代理转发请求（如vue-cli的devServer.proxy）
  • 确认请求URL为相对路径，避免不必要的跨域

• 请求URL配置错误
  先打印url变量确认地址是否正确，排查拼写错误、路径层级问题：

  console.log('请求地址:', url);
  vm.$http.get(url)
  // 后续逻辑
  

• 全局响应拦截器干扰
  若项目配置了vue-resource全局拦截器，可能存在错误的判定逻辑导致请求被强制转入catch。检查拦截器代码：

  Vue.http.interceptors.push((request, next) => {
    next((response) => {
      // 此处若错误地reject了正常响应，会触发catch
      if (response.status !== 200) {
        return Promise.reject(response);
      }
      return response;
    });
  });
  

  调整拦截规则，确保正常响应能正确返回。

• 内联环境导致的请求实例异常
  内联页面可能导致Vue实例的$http上下文异常，可尝试用原生fetch或axios替换测试：

  // 用fetch测试
  fetch(url)
    .then(res => res.json())
    .then(data => {
      console.log(data);
      vm.$hms.loading.hide();
    })
    .catch(err => {
      console.log(err);
      vm.$hms.loading.hide();
    });
  

  若原生请求正常，说明是vue-resource适配问题，可考虑更换请求库或重新初始化vue-resource配置。

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