Promise.reject()传参问题：response.json()在catch中显示undefined

嘿，我来帮你搞定这个问题！你遇到的核心问题有两个：

1. Promise.reject()只接受单个参数
   你现在给Promise.reject()传了response.status和response.json()两个参数，但Promise的reject方法只会接收第一个参数，剩下的都会被直接忽略。这就是为什么你的catch回调里resp是undefined——它根本没被传进来。

2. response.json()是异步操作
   就算你只传response.json()，catch里拿到的也会是一个Promise对象，而不是解析后的JSON数据，因为response.json()本身需要时间去读取并解析响应体。

正确的解决方案 #

我们需要把要传递的状态和响应数据包装成一个对象，同时先解析response.json()再传递。这里有两种实现方式：

方式一：使用async/await（更简洁）

const checkResponse = async (response) => {
  if (response.status >= 200 && response.status < 300) {
    return response.json();
  } else {
    // 先异步解析响应体的JSON数据
    const respData = await response.json();
    // 把状态和数据包装成对象reject出去
    return Promise.reject({ status: response.status, resp: respData });
  }
}

对应的catch块修改为：

.catch((error) => {
  console.log('Request failed', error.status, error.resp);
});

方式二：使用.then链式调用（不依赖async/await）

如果你不想用async函数，也可以用.then来处理response.json()的异步操作：

const checkResponse = (response) => {
  if (response.status >= 200 && response.status < 300) {
    return response.json();
  } else {
    return response.json().then(respData => {
      return Promise.reject({ status: response.status, resp: respData });
    });
  }
}

额外注意事项 #

如果后端返回的响应不是合法JSON，response.json()会抛出错误。为了避免这种情况导致我们的错误处理逻辑失效，可以加个异常捕获：

const checkResponse = async (response) => {
  if (response.status >= 200 && response.status < 300) {
    return response.json();
  } else {
    let respData;
    try {
      respData = await response.json();
    } catch (e) {
      // 解析失败时设置默认值，比如null或者空对象
      respData = null;
    }
    return Promise.reject({ status: response.status, resp: respData });
  }
}

这样修改后，你就能在catch块里同时拿到状态码和解析后的响应数据啦！

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