项目连接: 93Laer/MyDemo
ReactNative使用手册
发起网络请求
要从任意地址获取内容的话,只需简单地将网址作为参数传递给fetch方法即可(fetch这个词本身也就是获取
的意思):
fetch('https://mywebsite.com/mydata.json')
Fetch还有可选的第二个参数,可以用来定制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',
})
})
译注:如果你的服务器无法识别上面POST的数据格式,那么可以尝试传统的form格式,示例如下:
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'key1=value1&key2=value2'
})
注意:由于我们的网络请求有可能出错,但是不加catch是看不到的,所以基本固定写法都会加一个catch操作
.catch(error) {
console.error(error);
}
完整网络请求示例:
getData = ()=> {
//请求网络
fetch(`https://api.github.com/search/repositories?q=Android&sort=stars`)
.then(response=>response.json())
.then(json=> {
//打印请求结果
console.error(json);
})
.catch((error)=> {
console.error(error);
})
.done()
}
注意:由于我们的网络请求只执行了一次,我们应该在什么时候进行网络请求了,类似与安卓在fragment中需要请求数据一样,这时候就要用到了RN的生命周期了。
我这里网络请求放在了componentWillMount()请求,因为它执行在render()之前,且只执行一次。
then关键字:类似于RxJava中的“map()”,其实就是对结果做一定的操作
题外话:用了RN的网络请求,感觉很简洁,很爽的样子,当然也还有一些其他的框架(其他框架使用点击官网),这里只看官方推荐这个,安卓网络框架太多,写起来也各有各的麻烦
小练习:写一个简单的页面,从网络请求数据,然后展示到ListView中,代码在我的项目中都有,可以找到注释的代码直接运行项目
喜欢请点赞,或是关注,后续将完善发布更多的文章,你的鼓励就是我的动力(程序员最大的动力莫过于同行的鼓励)