前端获取HTTP状态码的方法有多种：使用XMLHttpRequest、使用Fetch API、使用Axios库。其中，使用Fetch API 是最为现代和常用的方法。Fetch API 提供了更简洁、灵活的方式来获取HTTP响应信息，包括状态码。下面我们将详细讨论如何使用Fetch API来获取HTTP状态码。
一、使用Fetch API获取HTTP状态码
Fetch API 是现代浏览器中提供的一种接口，用于发起网络请求。它比传统的XMLHttpRequest更简洁且更加强大。
1、基本用法
Fetch API的基本用法非常简单。假设我们需要从一个API获取数据并处理响应状态码，可以使用以下代码：
fetch('https://api.example.com/data')
.then(response => {
console.log('HTTP Status Code:', response.status);
if (response.ok) {
return response.json();
} else {
throw new Error('Network response was not ok');
}
})
.then(data => {
console.log('Data:', data);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
在上面的代码中，response.status可以获取到HTTP状态码。response.ok是一个布尔值，表示响应状态码是否在200-299范围内。
2、处理不同的状态码
在实际应用中，我们可能需要根据不同的状态码执行不同的逻辑。可以通过switch语句来处理不同的状态码：
fetch('https://api.example.com/data')
.then(response => {
switch (response.status) {
case 200:
console.log('Request was successful');
return response.json();
case 404:
throw new Error('Resource not found');
case 500:
throw new Error('Server error');
default:
throw new Error('Unhandled status code: ' + response.status);
}
})
.then(data => {
console.log('Data:', data);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
通过这种方式，我们可以根据不同的HTTP状态码执行不同的逻辑，从而更好地处理网络请求。
二、使用XMLHttpRequest获取HTTP状态码
尽管Fetch API已经成为主流，但在一些老旧的项目中，仍然会使用XMLHttpRequest来处理网络请求。下面是如何使用XMLHttpRequest获取HTTP状态码的方法。
1、基本用法
XMLHttpRequest的基本用法如下：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
console.log('HTTP Status Code:', xhr.status);
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log('Data:', data);
} else {
console.error('Request failed with status code:', xhr.status);
}
}
};
xhr.send();
在上面的代码中，xhr.status可以获取到HTTP状态码。xhr.readyState === 4表示请求已完成。
2、处理不同的状态码
与Fetch API类似，我们也可以使用switch语句来处理不同的状态码：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
switch (xhr.status) {
case 200:
console.log('Request was successful');
var data = JSON.parse(xhr.responseText);
console.log('Data:', data);
break;
case 404:
console.error('Resource not found');
break;
case 500:
console.error('Server error');
break;
default:
console.error('Unhandled status code:', xhr.status);
}
}
};
xhr.send();
这种方式虽然比Fetch API稍显繁琐，但在一些旧项目中仍然非常常见。
三、使用Axios库获取HTTP状态码
Axios 是一个基于Promise的HTTP库，适用于浏览器和Node.js。它的API设计非常简洁，使用起来也非常方便。
1、基本用法
使用Axios获取HTTP状态码的基本用法如下：
axios.get('https://api.example.com/data')
.then(response => {
console.log('HTTP Status Code:', response.status);
console.log('Data:', response.data);
})
.catch(error => {
if (error.response) {
console.error('Request failed with status code:', error.response.status);
} else {
console.error('Error:', error.message);
}
});
在上面的代码中，response.status可以获取到HTTP状态码，response.data可以获取到响应数据。
2、处理不同的状态码
同样，我们可以使用switch语句来处理不同的状态码：
axios.get('https://api.example.com/data')
.then(response => {
switch (response.status) {
case 200:
console.log('Request was successful');
console.log('Data:', response.data);
break;
case 404:
console.error('Resource not found');
break;
case 500:
console.error('Server error');
break;
default:
console.error('Unhandled status code:', response.status);
}
})
.catch(error => {
if (error.response) {
console.error('Request failed with status code:', error.response.status);
} else {
console.error('Error:', error.message);
}
});
这种方式不仅简洁，还可以处理更多的错误情况。
四、综合应用和最佳实践
在实际应用中，我们往往会遇到更复杂的情况，比如需要处理重试逻辑、请求超时、统一错误处理等。下面我们将讨论一些最佳实践。
1、添加重试逻辑
在网络请求失败时，特别是由于临时的网络问题导致的失败，可以添加重试逻辑来提高请求的成功率。以下是一个简单的重试逻辑示例：
function fetchDataWithRetry(url, retries = 3) {
return fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.catch(error => {
if (retries > 0) {
console.log(`Retrying... (${retries} attempts left)`);
return fetchDataWithRetry(url, retries - 1);
} else {
throw error;
}
});
}
fetchDataWithRetry('https://api.example.com/data')
.then(data => {
console.log('Data:', data);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
在这个示例中，fetchDataWithRetry函数会在请求失败时重试最多3次。
2、统一错误处理
在大型应用中，统一的错误处理可以让代码更加清晰并易于维护。我们可以创建一个通用的错误处理函数：
function handleError(error) {
if (error.response) {
switch (error.response.status) {
case 404:
console.error('Resource not found');
break;
case 500:
console.error('Server error');
break;
default:
console.error('Unhandled status code:', error.response.status);
}
} else {
console.error('Error:', error.message);
}
}
axios.get('https://api.example.com/data')
.then(response => {
console.log('Data:', response.data);
})
.catch(handleError);
通过这种方式，我们可以在一个地方集中处理所有的错误逻辑。
3、请求超时处理
网络请求可能会因为各种原因超时，特别是在网络状况不佳的情况下。我们可以为Fetch API添加超时处理：
function fetchWithTimeout(url, options, timeout = 5000) {
return Promise.race([
fetch(url, options),
new Promise((_, reject) =>
setTimeout(() => reject(new Error('Request timed out')), timeout)
)
]);
}
fetchWithTimeout('https://api.example.com/data', {}, 5000)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log('Data:', data);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
在这个示例中，fetchWithTimeout函数会在请求超时后抛出一个错误。
五、总结
获取HTTP状态码是前端开发中非常常见的需求，无论是使用Fetch API、XMLHttpRequest，还是使用第三方库如Axios，都有各自的优点和适用场景。使用Fetch API 是现代开发中最推荐的方法，它提供了更简洁和灵活的方式来处理HTTP请求。通过结合重试逻辑、统一错误处理和请求超时处理，我们可以构建更加健壮和可靠的网络请求逻辑。
在团队协作和项目管理中，使用合适的工具如研发项目管理系统PingCode 和 通用项目协作软件Worktile，可以进一步提高开发效率和项目管理的质量。
相关问答FAQs：
1. 如何在前端获取HTTP状态码？
在前端获取HTTP状态码可以使用XMLHttpRequest对象的status属性。通过发送HTTP请求并接收响应后，可以通过xhr.status来获取状态码。例如，如果状态码为200，表示请求成功；如果状态码为404，表示请求的资源未找到。
2. 前端如何判断HTTP请求是否成功？
可以通过HTTP状态码来判断HTTP请求是否成功。一般来说，状态码以2开头的表示成功，以4开头的表示客户端错误，以5开头的表示服务器错误。因此，可以通过判断状态码是否在200到299之间来确定请求是否成功。
3. 如何处理前端获取的HTTP状态码？
在前端获取到HTTP状态码后，可以根据不同的状态码进行相应的处理。例如，如果状态码为200，表示请求成功，可以将响应的数据展示给用户；如果状态码为404，表示请求的资源未找到，可以提示用户资源不存在；如果状态码为500，表示服务器内部错误，可以进行错误处理或者提示用户稍后再试。通过根据状态码进行不同的处理，可以提升用户体验和错误处理能力。
文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/2447751
