网络
许多移动应用需要从远程 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.net.cn/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.net.cn/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
开头的 URL)获取数据,您首先需要添加 ATS 例外。如果您事先知道需要访问哪些域,则仅为这些域添加例外会更安全;如果在运行时才知道域,则可以完全禁用 ATS。但请注意,从 2017 年 1 月起,Apple 的 App Store 审核将要求对禁用 ATS 提供合理理由。有关更多信息,请参阅 Apple 的文档。
在 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
可能是合适的。例如,可能需要为来自应用程序的所有网络请求设置自定义用户代理字符串,或向 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];
}