在 React Native 中获取 HTTP 状态码是通过网络请求实现的,状态码是 HTTP 响应的一部分,表示请求的处理结果。常见的状态码包括:
fetch('https://api.example.com/data')
.then(response => {
console.log('HTTP状态码:', response.status);
return response.json();
})
.then(data => {
console.log('响应数据:', data);
})
.catch(error => {
console.error('请求错误:', error);
});
首先安装 axios:
npm install axios
然后使用:
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => {
console.log('HTTP状态码:', response.status);
console.log('响应数据:', response.data);
})
.catch(error => {
if (error.response) {
// 服务器返回了响应但状态码不在 2xx 范围内
console.log('HTTP状态码:', error.response.status);
console.log('错误数据:', error.response.data);
} else {
console.error('请求错误:', error.message);
}
});
| 方法 | 优点 | 缺点 | |--------|-----------------------------|-------------------------| | fetch | 内置API,无需额外安装 | 错误处理较复杂 | | axios | 更简洁的API,更好的错误处理 | 需要额外安装依赖 |
原因: 浏览器安全限制,服务器未正确配置CORS头 解决: 确保API服务器设置了正确的Access-Control-Allow-Origin头
原因: 设备无网络连接或DNS解析失败 解决: 检查网络连接,添加错误处理
axios.get('https://api.example.com/data')
.catch(error => {
if (error.code === 'ECONNABORTED') {
console.log('请求超时');
} else if (error.code === 'ENETUNREACH') {
console.log('网络不可达');
}
});
原因: 自签名证书或证书过期 解决: 开发阶段可暂时禁用证书验证(生产环境不推荐)
import { Platform } from 'react-native';
const httpsAgent = new https.Agent({
rejectUnauthorized: Platform.OS === 'android' ? false : true
});
axios.get('https://api.example.com/data', { httpsAgent });
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
// 处理未授权情况
redirectToLogin();
}
return Promise.reject(error);
}
);
const handleResponse = (response) => {
switch(response.status) {
case 200:
return response.data;
case 204:
return null;
case 400:
throw new Error('请求参数错误');
case 500:
throw new Error('服务器错误');
default:
throw new Error(`未知错误: ${response.status}`);
}
};
fetch('https://api.example.com/data')
.then(handleResponse)
.catch(handleError);
type HttpStatus = 200 | 400 | 401 | 403 | 404 | 500;
interface ApiResponse<T> {
status: HttpStatus;
data: T;
message?: string;
}
以上是在React Native中获取和处理HTTP状态码的完整指南,涵盖了从基础到高级的各种应用场景和解决方案。