Vue组件fetch请求无法将响应状态存入errorMessage新手求助

问题原因 #

核心问题来自两个你忽略的fetch API特性：

• fetch API 和常见的axios等请求库逻辑不同，仅网络层错误（比如断网、跨域被拦截）才会进入catch回调，HTTP 4xx/5xx类的业务错误会被判定为请求成功，不会触发catch，因此你无法在默认的catch中拿到500状态对应的响应信息
• 你当前代码中第一个.then(res => console.log(res))的返回值是undefined，导致后续链式调用的所有逻辑都拿不到原始响应对象，同时你注释了res.json()的解析逻辑，也无法正常获取响应体内容

另外你注释掉content-type的操作是正确的，FormData类型的请求不需要手动设置该请求头，浏览器会自动生成带boundary的请求头，手动设置反而会导致后端解析失败。

修正后的代码 #

addSpeler(){
  const formData = new FormData();
  formData.append('name',this.name);
  formData.append('pass_code',this.pass_code);
  formData.append('game_id', this.currentGame.id);
  if(this.exists === false){
    fetch(`api/speler`, {
      method: 'post',
      body:formData,
      headers:{
        // 'accept':'application/json'
      }
    })
    .then(res => {
      console.log(res)
      // 手动判断HTTP状态是否在正常区间（200~299）
      if (!res.ok) {
        // 手动抛出包含状态信息的错误，才会进入后续catch处理
        throw {
          status: res.status,
          statusText: res.statusText
        }
      }
      return res.json()
    })
    .then(data => {
      this.name='';
      this.code='';
    })
    .catch(err => {
      // 区分业务错误和网络错误
      if (err.status) {
        this.errorMessage = `请求失败：${err.status} ${err.statusText}`
      } else {
        this.errorMessage = `网络错误：${err.message}`
      }
      console.log(err);
    });
  }
},

内容的提问来源于stack exchange，提问作者M.Koops