正文

掌握JavaScript中获取网络请求状态码的技巧

/0 浏览量
0527

在开发过程中，我们经常需要与服务器进行交互，发送网络请求以获取数据或执行操作。了解如何获取网络请求的状态码对于调试和优化应用程序至关重要。以下是几种在JavaScript中获取网络请求状态码的技巧。

使用XMLHttpRequest

XMLHttpRequest是JavaScript中最早的用于发送HTTP请求的方法之一。使用XMLHttpRequest获取状态码的方法如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 请求成功
      console.log('Response status:', xhr.status);
    } else {
      // 请求失败
      console.error('Request failed with status:', xhr.status);
    }
  }
};
xhr.send();

在上面的代码中，onreadystatechange事件处理函数会在请求的状态发生变化时被调用。当readyState属性等于XMLHttpRequest.DONE（通常为4）时，表示请求已完成。此时，可以通过status属性获取状态码。

使用fetch API

fetch API是现代浏览器提供的一个更简洁、更强大的网络请求接口。使用fetch获取状态码的方法如下：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok: ' + response.statusText);
    }
    return response;
  })
  .then(data => {
    console.log('Response status:', data.status);
  })
  .catch(error => {
    console.error('Request failed:', error);
  });

在上面的代码中，fetch函数返回一个Promise对象。当请求完成时，该Promise对象会解析为响应对象。通过调用response.ok属性，可以判断请求是否成功。如果成功，可以通过response.status属性获取状态码。

使用axios库

axios是一个基于Promise的HTTP客户端，它提供了更简洁的API和丰富的功能。使用axios获取状态码的方法如下：

axios.get('https://api.example.com/data')
  .then(response => {
    console.log('Response status:', response.status);
  })
  .catch(error => {
    if (error.response) {
      // 请求已发出，服务器响应状态码不在2xx的范围
      console.error('Request failed with status:', error.response.status);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('The request was made but no response was received', error.request);
    } else {
      // 发送请求时出了点问题
      console.error('Error', error.message);
    }
  });

在上面的代码中，axios.get方法返回一个Promise对象。当请求成功时，该Promise对象会解析为响应对象。通过访问error.response属性，可以获取到状态码。

总结

掌握这些技巧可以帮助你在JavaScript中轻松获取网络请求的状态码，从而更好地处理请求结果。在实际开发中，可以根据项目需求和个人喜好选择合适的方法。

-- 展开阅读全文 --