Javascript 使用FetchAPI，在处理错误时如何访问JSON数据

我们的API服务器返回带有错误响应的JSON数据。我在错误处理方法中找不到处理JSON数据的标准方法。我目前的解决办法是这样。它正在工作，但我想在catch（）方法中处理错误，而不是在then（）中处理错误

let url='1〕http://localhost:8080';
让数据={'field'：'value'}；
获取（url{
方法：'放'，
正文：JSON.stringify（数据），
凭据：“相同来源”，
模式：“cors”，
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”
}
})
。然后（res=>{
如果（res.status==400）{
返回res.json（）；
}否则，如果（！res.ok）{
投掷（res）；
}否则{
返回res.json（）；
}
})。然后（数据=>{
如果（data.status==400）{
投掷（数据）；
}
返回（数据）；
}).catch（错误=>{
如果（错误状态==400）{
扔掉这个。把手错误（错误）；
}否则{
抛出新错误（`HTTP错误${err.status}`）；
}
});我会在fetch周围做一个薄包装，它抛出>=400个带有解析体的响应，否则解析成功的响应

function parse(res) {
  const contentType = res.headers.get('Content-Type') || '';
  const isJson = contentType.includes('application/json');
  return isJson ? res.json() : res;
}

async function throwOnError(res) {
  if (res.status >= 400) {
    const err = new Error(res.statusText || 'Internal Server Error');
    err.status = res.status;
    const parsedRes = await parse(res);
    err.body = parsedRes;
    throw err;
  }

  return res;
}

async function fetchWrapper({ method, url, data, headers }) {
  const combinedHeaders = {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  };

  if (headers) {
    Object.assign(combinedHeaders, headers);
  }

  const options = {
    credentials: 'same-origin',
    mode: 'cors',
    method,
    headers: combinedHeaders,
  };

  if (data) {
    options.body = JSON.stringify(data);
  }

  return fetch(url, options)
    .then(throwOnError)
    .then(parse);
}

const queryParams = (params) =>
  Object.keys(params)
    .filter(k => params[k] !== null && typeof params[k] !== 'undefined')
    .map(k => `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`)
    .join('&');

export const appendUrlParams = (url, params) => (params ? `${url}?${queryParams(params)}` : url);

export const $get = (url, params, { ...options }) =>
  fetchWrapper({ method: 'GET', url: appendUrlParams(url, params), ...options });

export const $del = (url, params, { ...options }) =>
  fetchWrapper({ method: 'DELETE', url: appendUrlParams(url, params), ...options });

export const $post = (url, data, { ...options }) =>
  fetchWrapper({ method: 'POST', url, data, ...options });

export const $put = (url, data, { ...options }) =>
  fetchWrapper({ method: 'PUT', url, data, ...options });

e、 g

如果您喜欢，也可以使用then/catch。
哦。。。所以JSON包含状态。。。那么，如果JSON中的状态始终与响应状态相同，那么就很容易了-
return Promise.reject（res.JSON（））
如果res.status==400，它只为400响应返回JSON？不，这只是一个示例。它返回其他错误类型的JSON。我将扩展代码来处理它们。但您是说您接受json，所以我假设它也会返回json以获得成功响应？此代码包含在函数中。它返回这个取回承诺。因此，您添加了另一个.then（）来处理已解析的数据。谢谢。我期待一个更简单的解决方案。在评论部分，这一问题得到解决。我坚持要兑现承诺。在异步函数中封装fetch可能是一个更优雅的解决方案。
async function fetchSomething() {
  try {
    const res = await $get('someurl');
    // Do something with successful `res`.
  } catch (err) {
    console.error(err);
    // err.status -> the status of the response
    // err.body -> the body of the response
  }
}