掌握React Native的Fetch Api

网络

这一章呢,不会只讲网络哦~

Mock Api

Mock Api是一项非常棒的服务,它可以帮助我们快速的模拟后端的REST Api并且不需要你自己的服务器,甚至代码都不用写,它的网址是
http://www.mockapi.io/, 可以注册也可以使用GitHub帐号登陆。

点击+来创建一个项目:

PNG

填写项目名称和Api前缀(随便写就行):

PNG

接下来点击Create Resource来创建资源:

PNG

然后填写资源名称,以及修改Schema,为了方便,我们就留下id和name:

PNG

然后点击next按钮,这一步完了之后,我们就可以通过xxxxxxx.mockapi.io/api/user使用REST Api了。

Fetch

在React Native中,我们可以使用Fetch来进行网络请求,由于Fetch API天然支持Promise规范,所以我们的代码可以变得很优雅。

执行Get操作应该是最为简单的了,我们看下代码:

1
2
3
4
5
fetch('http://xxx.mockapi.io/api/user')
.then((response) => {
console.log(response);
})
.catch((err) => console.error(err);)

这样便可以在控制台打印出user下的所有内容。你可能会想:喵喵喵?React Native还有控制台? 当然有啦,不过我们得打开远程调试,首先打开菜单:

PNG

然后选择Debug Js Remotely,之后便会自动打开Chrome。自己打开Chrome的控制台便可以看到console.log的内容了。

实际应用中,我们会在组件渲染的时候把数据丢到状态或别的地方,然后使用这些数据(一般会用作列表渲染)。不管怎么说,不会直接console就是了。

然后是Post:

1
2
3
4
5
6
7
8
9
10
11
12
fetch('http://xxxx.mockapi.io/api/user', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'meow',
})
})
.then(xxxx)
.catch((err) => console.error(err))

我们可以加个then来处理在Post过程中要做的事情,并用catch来获取异常。

至于Put和Delete参考Post就好啦~

×

谢谢你请我吃辣条

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 网络
    1. 1.1. Mock Api
    2. 1.2. Fetch
,