网络通信
本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →
许多移动应用需要从远程 URL 加载资源。您可能需要向 REST API 发起 POST 请求，或是从其他服务器获取静态内容片段。
使用 Fetch
React Native 提供了 Fetch API 来满足网络通信需求。如果您曾使用过 XMLHttpRequest 或其他网络 API，会对 Fetch 感到熟悉。更多信息可参考 MDN 的 使用 Fetch 指南。
发起请求
要从任意 URL 获取内容，只需将 URL 传递给 fetch 方法：
fetch('https://mywebsite.com/mydata.json');
Fetch 还支持可选的第二个参数，用于自定义 HTTP 请求。您可能需要添加额外请求头或发起 POST 请求：
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
}),
});
完整属性列表请查阅 Fetch Request 文档。
处理响应
上述示例展示了如何发起请求。多数情况下，您还需要对响应结果进行处理。
网络通信本质上是异步操作。Fetch 方法会返回一个 Promise，让编写异步代码变得简单直接：
const getMoviesFromApi = () => {
return fetch('https://reactnative.dev/movies.json')
.then(response => response.json())
.then(json => {
return json.movies;
})
.catch(error => {
console.error(error);
});
};
在 React Native 应用中也可使用 async / await 语法：
const getMoviesFromApiAsync = async () => {
try {
const response = await fetch(
'https://reactnative.dev/movies.json',
);
const json = await response.json();
return json.movies;
} catch (error) {
console.error(error);
}
};
请务必捕获 fetch 可能抛出的错误，否则这些错误会被静默忽略。
- TypeScript
- JavaScript
默认情况下，iOS 9.0 及以上版本强制启用应用传输安全 (ATS) 策略。ATS 要求所有 HTTP 连接必须使用 HTTPS。如需从明文 URL（以 http 开头的地址）获取数据，您需要先添加 ATS 例外。如果提前知道需要访问的域名，建议仅针对这些域名添加例外更为安全；若域名需运行时才能确定，可以完全禁用 ATS。请注意自 2017 年 1 月起，苹果应用商店审核要求对禁用 ATS 提供合理说明。详见 苹果官方文档。
在 Android 平台上，从 API 28 级开始默认同样会阻止明文流量。可通过在应用清单文件中设置 android:usesCleartextTraffic 来覆盖此行为。
使用其他网络库
XMLHttpRequest API 已内置在 React Native 中。这意味着您可以使用依赖它的第三方库（如 frisbee 或 axios），也可以直接使用 XMLHttpRequest API。
const request = new XMLHttpRequest();
request.onreadystatechange = e => {
if (request.readyState !== 4) {
return;
}
if (request.status === 200) {
console.log('success', request.responseText);
} else {
console.warn('error');
}
};
request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();
XMLHttpRequest 的安全模型与 Web 环境不同，因为原生应用中没有 CORS 概念。
WebSocket 支持
React Native 同样支持 WebSockets，该协议可在单个 TCP 连接上提供全双工通信通道。
const ws = new WebSocket('ws://host.com/path');
ws.onopen = () => {
// connection opened
ws.send('something'); // send a message
};
ws.onmessage = e => {
// a message was received
console.log(e.data);
};
ws.onerror = e => {
// an error occurred
console.log(e.message);
};
ws.onclose = e => {
// connection closed
console.log(e.code, e.reason);
};
fetch 与基于 Cookie 的身份验证的已知问题
以下选项目前在 fetch 中无法使用：
-
redirect:manual -
credentials:omit
-
在 Android 平台上，若存在同名请求头，仅最后一个会被保留。临时解决方案可参考：https://github.com/facebook/react-native/issues/18837#issuecomment-398779994。
-
基于 Cookie 的认证机制当前表现不稳定，相关问题可查阅：https://github.com/facebook/react-native/issues/23185
-
至少在 iOS 平台，当遇到
302重定向时，若响应头包含Set-Cookie字段，Cookie 可能无法正确设置。由于无法手动处理重定向，若重定向由会话过期触发，可能导致请求无限循环。
在 iOS 上配置 NSURLSession
某些应用场景可能需要为运行于 iOS 的 React Native 应用底层用于网络请求的 NSURLSession 提供自定义的 NSURLSessionConfiguration。例如：统一设置所有网络请求的自定义 User-Agent 字符串，或为 NSURLSession 提供临时的 NSURLSessionConfiguration。通过 RCTSetCustomNSURLSessionConfigurationProvider 函数可实现此类定制。请注意在调用 RCTSetCustomNSURLSessionConfigurationProvider 函数的文件中添加以下导入语句：
#import <React/RCTHTTPRequestHandler.h>
RCTSetCustomNSURLSessionConfigurationProvider 应在应用生命周期早期调用，确保 React 需要时即可使用，例如：
-(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// set RCTSetCustomNSURLSessionConfigurationProvider
RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
// configure the session
return configuration;
});
// set up React
_bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
}