很多移动应用都需要从远程地址中获取数据或资源。您可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅需要从某个服务器上获取一些静态内容-以下就是你会新手可以对照这个替换的视频教程加深理解。
React Native提供了和web标准一致的Fetch API,用于满足开发者访问网络的需求。如果您之前使用过XMLHttpRequest
(即俗称的ajax)或其他的网络API,那么Fetch就用起来就会相当容易上手。这篇文档只会列出Fetch的基本用法,并不会带来太多细节,你可以使用你喜欢的搜索引擎去搜索fetch api
关键字以了解更多信息。
发起请求
要从任意地址获取内容的话,只需简单地将网址作为参数传递给fetch方法即可(fetch这个词本身也就是获取
的意思):
fetch('https://mywebsite.com/mydata.json');
获取另外可选的第二个参数,可以使用自定义HTTP请求一些参数。您可以指定header参数,或者指定使用POST方法,又或者提交数据等等:
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
}),
});
提交数据的格式必须由标头中性Content-Type
。Content-Type
有很多不同,对应正文的格式也有区别。到底应该采用什么样的Content-Type
服务器端,所以请和服务器端的开发人员沟通确定清楚。常用的'Content-Type '除了上面的'application / json',还有传统的网页表单形式,示例如下:
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'key1=value1&key2=value2',
});
可以参考获取请求文档来查看所有可用的参数。
注意:使用Chrome调试当前无法观察到React Native中的网络请求,您可以使用第三方的react-native-debugger来进行观察。
处理服务器的响应数据
上面的示例演示了如何发起请求。很多情况下,你还需要处理服务器回复的数据。
网络请求天然是一种异步操作(译注:同样的还有asyncstorage,请不要再问如何把异步变成同步!无论在语法上怎么折腾,它们的本质本质是无法改变的。提取方法会返回一个Promise,这种模式可以简化异步样式的代码(译注:同样的,如果你不了解承诺,建议使用搜索引擎补课):
function getMoviesFromApiAsync() {
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
}
你也可以在React Native应用中使用ES2017标准中的async
/ await
语法:
// 注意这个方法前面有async关键字
async function getMoviesFromApi() {
try {
// 注意这里的await语句,其所在的函数必须有async关键字声明
let response = await fetch(
'https://facebook.github.io/react-native/movies.json',
);
let responseJson = await response.json();
return responseJson.movies;
} catch (error) {
console.error(error);
}
}
别忘了catch住fetch
可能引发的异常,否则错误时你可能看不到任何提示。
import React from 'react';
import { FlatList, ActivityIndicator, Text, View } from 'react-native';
export default class FetchExample extends React.Component {
constructor(props){
super(props);
this.state ={ isLoading: true}
}
componentDidMount(){
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson.movies,
}, function(){
});
})
.catch((error) =>{
console.error(error);
});
}
render(){
if(this.state.isLoading){
return(
)
}
return(
{item.title}, {item.releaseYear} }
keyExtractor={(item, index) => item.id}
/>
);
}
}
默认情况下,iOS设备会阻止所有HTTP的请求,以督促开发者使用HTTPS。如果你仍然需要使用HTTP协议,那么首先需要添加一个应用程序传输安全的例外,柯林斯详细参考这篇日志相册。
从Android9开始,也会默认停止http请求,请参考相关配置