在JavaScript中获取请求状态码，可以通过XMLHttpRequest、Fetch API、或者使用第三方库如Axios。本文将详细介绍这三种方式的实现方法，以便开发者在不同场景中选择合适的方法。
通过XMLHttpRequest、Fetch API、和Axios可以获取请求状态码。XMLHttpRequest适合处理传统的同步和异步请求、Fetch API具备更现代的语法和更好的可读性、Axios则提供了更强大的功能和简洁的语法。下面将详细介绍如何使用这些方法获取请求状态码。
一、XMLHttpRequest
1、基本用法
XMLHttpRequest是最早用于在客户端与服务器之间进行数据交互的API之一。它支持异步和同步请求，但通常推荐使用异步请求来避免阻塞UI线程。
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { // 请求完成
console.log("Status Code:", xhr.status); // 输出状态码
if (xhr.status === 200) {
console.log("Response Data:", xhr.responseText);
}
}
};
xhr.send();
2、处理不同状态码
在实际应用中，处理不同的状态码以应对各种情况非常重要。以下示例展示了如何处理常见的HTTP状态码。
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
switch (xhr.status) {
case 200:
console.log("Success:", xhr.responseText);
break;
case 404:
console.log("Not Found");
break;
case 500:
console.log("Internal Server Error");
break;
default:
console.log("Other Status:", xhr.status);
}
}
};
二、Fetch API
1、基本用法
Fetch API是一个现代的接口，提供了更简洁和更强大的方式来发出网络请求。它基于Promise，使得代码更加简洁和易读。
fetch("https://api.example.com/data")
.then(response => {
console.log("Status Code:", response.status); // 输出状态码
if (response.ok) {
return response.json(); // 解析JSON数据
}
throw new Error("Network response was not ok.");
})
.then(data => {
console.log("Response Data:", data);
})
.catch(error => {
console.error("Fetch error:", error);
});
2、处理不同状态码
同样，处理不同的状态码也是必不可少的。以下示例展示了如何使用Fetch API处理各种HTTP状态码。
fetch("https://api.example.com/data")
.then(response => {
console.log("Status Code:", response.status);
if (response.status === 200) {
return response.json();
} else if (response.status === 404) {
throw new Error("Not Found");
} else if (response.status === 500) {
throw new Error("Internal Server Error");
} else {
throw new Error("Unexpected status code: " + response.status);
}
})
.then(data => {
console.log("Response Data:", data);
})
.catch(error => {
console.error("Fetch error:", error);
});
三、Axios
1、基本用法
Axios是一个基于Promise的HTTP库，提供了更简单的API接口和更多的功能，如请求拦截、响应拦截等。
const axios = require('axios');
axios.get("https://api.example.com/data")
.then(response => {
console.log("Status Code:", response.status); // 输出状态码
console.log("Response Data:", response.data); // 输出响应数据
})
.catch(error => {
if (error.response) {
console.log("Status Code:", error.response.status); // 输出状态码
console.log("Error Data:", error.response.data); // 输出错误响应数据
} else {
console.error("Axios error:", error.message);
}
});
2、处理不同状态码
使用Axios处理不同状态码的方式非常直观。以下示例展示了如何处理常见的HTTP状态码。
axios.get("https://api.example.com/data")
.then(response => {
console.log("Status Code:", response.status);
console.log("Response Data:", response.data);
})
.catch(error => {
if (error.response) {
switch (error.response.status) {
case 404:
console.log("Not Found");
break;
case 500:
console.log("Internal Server Error");
break;
default:
console.log("Other Status:", error.response.status);
}
} else {
console.error("Axios error:", error.message);
}
});
四、进阶用法和最佳实践
1、请求拦截和响应拦截
对于复杂的应用，可能需要对请求和响应进行统一处理，如添加鉴权信息、统一错误处理等。Axios提供了拦截器功能，非常适合这种需求。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
config.headers.Authorization = 'Bearer your_token';
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
2、处理跨域问题
在进行跨域请求时，可能会遇到CORS（跨域资源共享）问题。确保服务器端正确配置了CORS头信息，如Access-Control-Allow-Origin，以允许客户端进行跨域请求。
// 服务器端配置示例（Node.js/Express）
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*"); // 允许所有来源
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
next();
});
3、使用Async/Await简化异步操作
无论是Fetch API还是Axios，都可以结合async/await语法来简化异步操作，使代码更加简洁和易读。
async function fetchData() {
try {
const response = await fetch("https://api.example.com/data");
console.log("Status Code:", response.status);
if (response.ok) {
const data = await response.json();
console.log("Response Data:", data);
} else {
throw new Error("Network response was not ok.");
}
} catch (error) {
console.error("Fetch error:", error);
}
}
fetchData();
async function fetchDataWithAxios() {
try {
const response = await axios.get("https://api.example.com/data");
console.log("Status Code:", response.status);
console.log("Response Data:", response.data);
} catch (error) {
if (error.response) {
console.log("Status Code:", error.response.status);
console.log("Error Data:", error.response.data);
} else {
console.error("Axios error:", error.message);
}
}
}
fetchDataWithAxios();
4、错误处理和重试机制
在实际应用中，网络请求失败是常见的情况。为了提高用户体验，可以实现自动重试机制。
async function fetchDataWithRetry(url, retries = 3) {
for (let i = 0; i < retries; i++) {
try {
const response = await fetch(url);
if (response.ok) {
const data = await response.json();
return data;
} else {
throw new Error("Network response was not ok.");
}
} catch (error) {
console.error(`Fetch attempt ${i + 1} failed:`, error);
if (i === retries - 1) throw error;
}
}
}
fetchDataWithRetry("https://api.example.com/data", 3)
.then(data => console.log("Response Data:", data))
.catch(error => console.error("Final fetch error:", error));
五、结论
在JavaScript中获取请求状态码有多种方法，包括XMLHttpRequest、Fetch API、和Axios。每种方法都有其优缺点和适用场景，开发者应根据具体需求选择合适的方法。此外，通过请求拦截、响应拦截、错误处理和重试机制等进阶用法，可以进一步提高代码的健壮性和可维护性。无论是简单的单次请求还是复杂的网络交互，这些方法都能满足不同层次的需求。
相关问答FAQs：
1. 如何使用JavaScript获取请求的状态码？
在JavaScript中，可以通过以下代码获取请求的状态码：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api');
xhr.onload = function() {
var statusCode = xhr.status;
console.log('请求的状态码为：', statusCode);
};
xhr.send();
2. 我应该如何判断请求是否成功？
在HTTP协议中，状态码以一组三位数字表示请求的结果。常见的成功状态码包括200（OK），201（Created）等。你可以通过检查状态码是否以2开头来判断请求是否成功，例如：
if (statusCode >= 200 && statusCode < 300) {
console.log('请求成功！');
} else {
console.log('请求失败！');
}
3. 请求状态码有哪些常见的取值？
常见的HTTP请求状态码有很多，其中一些常见的状态码包括：
- 200：请求成功
- 201：请求已创建
- 400：请求无效
- 401：未授权
- 404：未找到
- 500：服务器内部错误
你可以根据不同的状态码，对请求的结果进行不同的处理。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3581811
