How do I get the HTTP response code from a successful React query?

在使用React进行开发时，获取HTTP响应代码常常与你选择的数据获取库有关。比如，如果你正在使用fetch API或者像axios这样的第三方库，方法会略有不同。下面我将分别解释如何在这两种情况下获取HTTP响应代码。

使用 Fetch API

当使用原生的fetch API进行数据请求时，你可以通过检查响应对象的status属性来获取HTTP响应代码。这里有一个简单的例子：

javascript
fetch('https://api.example.com/data')
  .then(response => {
    console.log('HTTP状态码:', response.status);  // 输出 HTTP 状态码
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Something went wrong');
    }
  })
  .then(data => {
    console.log('获取到的数据:', data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

在这个例子中，response.status 将会得到比如 200, 404 或 500 这样的HTTP状态码。response.ok 是一个布尔值，当状态码是在200到299之间时为true，因此可以用来检查请求是否成功。

使用 Axios

如果你使用axios进行HTTP请求，获取响应代码的方法也非常直接。axios 请求会返回一个包含status字段的响应对象。这里是一个例子：

javascript
axios.get('https://api.example.com/data')
  .then(response => {
    console.log('HTTP状态码:', response.status);  // 输出 HTTP 状态码
    console.log('获取到的数据:', response.data);
  })
  .catch(error => {
    if (error.response) {
      // 请求已发出，服务器响应状态码不在2xx的范围
      console.log('HTTP状态码:', error.response.status);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.log('请求没有响应');
    } else {
      // 发送请求时出了点问题
      console.log('Error', error.message);
    }
  });

在使用axios的情况下，如果请求成功执行（即HTTP状态码在200-299之间），你可以直接从response.status获取状态码。如果请求失败（例如，状态码是400或500），错误对象error.response.status会包含HTTP状态码。

总结

无论是使用fetch还是axios，获取HTTP响应代码都相对直接，关键在于访问响应对象的status属性。通过这种方式，你可以轻松处理不同的HTTP状态，例如重定向、客户端错误或服务器错误，并据此执行相应的逻辑处理。这对于开发稳健的Web应用程序来说非常重要。