fetch如何根据返回的http状态码输出返回json串中的错误信息

Question

网上大部分对于fetch的使用都是这种

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }
  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}

function parseJSON(response) {
  return response.json();
}

export default function request(url, options) {
  let opt = options||{};
  return fetch(url, {credentials: 'include', ...opt})
    .then(checkStatus)
    .then(parseJSON)
    .then((data) => ( data ))
    .catch((err) => ( err ));
}

他里面有两句话是有先后顺序的

    .then(checkStatus) //解析http状态码
    .then(parseJSON) //解析响应的json

我这边server端spring的统一异常处理, 针对客户端参数传递错误的处理方式就是, httpcode返回为400, 然后还有json, 一个范例就是

此时httpcode为400, response如下内容
{
    code: -1,
    msg: '用户名不能为空'
}

我想让当状态吗为400的时候, 提示出具体的错误消息 json.msg('用户名不能为空'), 但是怎么搞都不行啊, 他这个是then有先后顺序的, 在checkStatus调用res.json就跪了

跪了的代码

const checkStatus = res => {
    console.log(res);
    if (res.status >= 200 && res.status < 300) {
        return res;
    } else {
         let jsonTmp = res.json();
        Modal.error({
            title: '请求失败',
            content: `code: ${jsonTmp.code}, msg: ${jsonTmp.msg}`,
        });
        throw new BizException(res.status);
    }
}

Answer 1

testApi.js

export default class TestApi {
  static get(url, options = { credentials: 'include', method: 'GET', headers: {} }) {
    return fetch(url, options)
      .then((response) => {
        const contentType = response.headers.get('content-type');
        if (response.status >= 200 && response.status < 300) {
          if (contentType && contentType.indexOf('application/json') !== -1) {
            return response.json();
          }
          return response.text();
        }
        if (response.status === 400) {
          if (contentType && contentType.indexOf('application/json') !== -1) {
            return response.json().then(r => Promise.reject(r));
          }
          return response.text().then(r => Promise.reject(r));
        }
        if (response.status === 404) {
          return Promise.reject({ msg: '请求未找到' });
        }
        return Promise.reject(response);
      });
  }
}

调用方式：

import TestApi from 'xxxxxxxx/api/testApi';
...
TestApi.get('/api/xxxxxx').then((data) => {
  console.log('data : ', data); // 正确的返回
}, (err) => {
  console.log('error: ', err); // 错误的处理
});
...