GetHTTPSttaus代码获取API-- React Native
React Native 中获取 HTTP 状态码的完整指南
基础概念
在 React Native 中获取 HTTP 状态码是通过网络请求实现的，状态码是 HTTP 响应的一部分，表示请求的处理结果。常见的状态码包括：
- 200 (OK): 请求成功
- 400 (Bad Request): 客户端错误
- 401 (Unauthorized): 未授权
- 404 (Not Found): 资源不存在
- 500 (Internal Server Error): 服务器错误
实现方法
1. 使用 fetch API
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);
});2. 使用 axios
首先安装 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，更好的错误处理 | 需要额外安装依赖 |
常见问题及解决方案
1. 跨域问题(CORS)
原因: 浏览器安全限制，服务器未正确配置CORS头 解决: 确保API服务器设置了正确的Access-Control-Allow-Origin头
2. 网络连接问题
原因: 设备无网络连接或DNS解析失败 解决: 检查网络连接，添加错误处理
axios.get('https://api.example.com/data')
.catch(error => {
if (error.code === 'ECONNABORTED') {
console.log('请求超时');
} else if (error.code === 'ENETUNREACH') {
console.log('网络不可达');
}
});3. HTTPS证书问题
原因: 自签名证书或证书过期 解决: 开发阶段可暂时禁用证书验证(生产环境不推荐)
import { Platform } from 'react-native';
const httpsAgent = new https.Agent({
rejectUnauthorized: Platform.OS === 'android' ? false : true
});
axios.get('https://api.example.com/data', { httpsAgent });高级应用场景
1. 状态码拦截器
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
// 处理未授权情况
redirectToLogin();
}
return Promise.reject(error);
}
);2. 多状态码处理
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);最佳实践
- 统一处理HTTP状态码
- 为不同状态码提供用户友好的错误信息
- 对401状态码实现自动刷新token机制
- 记录错误状态码用于分析
- 使用TypeScript定义状态码类型
type HttpStatus = 200 | 400 | 401 | 403 | 404 | 500;
interface ApiResponse<T> {
status: HttpStatus;
data: T;
message?: string;
}以上是在React Native中获取和处理HTTP状态码的完整指南，涵盖了从基础到高级的各种应用场景和解决方案。
相关·内容
云服务器
ICP备案
云直播
即时通信 IM
实时音视频
腾讯云开发者
