React Native 之 网络请求Fetch

|

Fetch

我们在Android开发中，目前比较流行的网络请求框架是retrofit、volley等，同样在React Native开发中，我们使用Fetch做网络请求，下面我们就来介绍下Fetch的使用方法。

首先我们看一个简单的示例代码，获取知乎日报内容

1
2
3
4
5
6
7
8
fetch('https://news-at.zhihu.com/api/4/news/latest')
           .then((response) => response.json())//把response转为json格式
           .then((jsondata) => {    //上面的转好的json
           })
           .catch((error) => {
               console.error(error);
           });

啥情况，这么简洁，是的，有点像RxJava的链式调用再配上Labda表达式

Method

稍微解释下，这里没有看到method方法，因为fetch默认的就是GET方法，所以这里省略了没写，如果写全，我们可以这么写

1
2
3
4
5
6
7
8
fetch('https://news-at.zhihu.com/api/4/news/latest'，{method:'GET'})
           .then((response) => response.json())//把response转为json格式
           .then((jsondata) => {    //上面的转好的json
           })
           .catch((error) => {
               console.error(error);
           });

Headers

自定义Headers是我们经常要做的，这里也很简单，比如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
fetch('https://news-at.zhihu.com/api/4/news/latest'，{
            method:'GET',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
              'xxx':'xxx'
           }})
           .then((response) => response.json())//把response转为json格式
           .then((jsondata) => {    //上面的转好的json
           })
           .catch((error) => {
               console.error(error);
           });

关于请求头Header的话，还可以通过 Headers() 构造函数来创建一个你自己的 headers 对象。

1
2
3
4
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

也可以传一个多维数组或者对象字面量：

1
2
3
4
5
var myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": content.length.toString(),
  "X-Custom-Header": "ProcessThisImmediately",
});

赋值

1
2
3
4
5
6
7
8
9
10
11
fetch('xxxxx'，{
            method:'GET',
            headers: myHeaders
           })
           .then((response) => response.json())//把response转为json格式
           .then((jsondata) => {    //上面的转好的json
           })
           .catch((error) => {
               console.error(error);
           });

Body

Body是我们在做POST请求要提交的参数，应该怎么设置呢？看代码就知道啦

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
fetch('xxxxx'，{
            method:'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            }
            body:JSON.stringify({
              firstParam: 'xxx',
              secondParam: 'xxx',
            }
           })
           .then((response) => response.json())//把response转为json格式
           .then((jsondata) => {    //上面的转好的json
           })
           .catch((error) => {
               console.error(error);
           });

Promise

Fetch API 是基于 Promise 设计，那么关于 Promise 的内容可以参考下面的教程：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

我们知道网络请求是一个天然的异步操作，Fetch 方法会返回一个Promise，这种模式可以简化异步风格的代码。Promise 对象是一个返回值的代理，它允许你为异步操作的成功或失败指定处理方法。 这使得异步方法可以像同步方法那样返回值：异步方法会返回一个包含了原返回值的 Promise 对象来替代原返回值。

就像上面的第一个 then 返回的是response，接着我们调用了 response.json()将其转成了json对象，然后我们有调用了一个then，这时候返回的是jsondata，也就是上一步转成的json对象，then方法就是这么向下传递的，我们可以写无数个then

Request

除了上面的用法，我们还可以通过使用Request()构造函数来创建一个request对象，然后再作为参数传给fetch()。这里就相当于把url和header或者其他的参数综合起来！

1
2
3
4
5
6
7
var url='https://news-at.zhihu.com/api/4/news/latest';
var myOptions = { method: 'GET',
               headers: myHeaders,};
var myRequest = new Request(url, myOptions );
fetch(myRequest)
  .then()
  ...

Response

属性：

  • status (number) - HTTP请求结果参数，在100–599 范围
  • statusText (String) - 服务器返回的状态报告
  • ok (boolean) - 如果返回200表示请求成功则为true
  • headers (Headers) - 返回头部信息，下面详细介绍
  • url (String) - 请求的地址

方法：

  • text() - 以string的形式生成请求text
  • json() - 生成JSON.parse(responseText)的结果
  • blob() - 生成一个Blob
  • arrayBuffer() - 生成一个ArrayBuffer
  • formData() - 生成格式化的数据，可用于其他的请求

其他方法：
…

参考

(Promise)[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise]
(React Native入门（八）之网络请求Fetch)[http://blog.csdn.net/aiynmimi/article/details/77368129]
(React Native探索（五）使用fetch进行网络请求)[http://liuwangshu.cn/rn/primer/5-fetch.html]