React Native 之 网络请求 fetch

最近做React native开发，遇到了这种fetch请求，说实话，以前用ajax比较多，对这种fetch请求

还真是不怎么了解，所以花时间百度一下，看看大家怎么用的。顺便也需要封装一下网路请求的

get和post方法，方便下面的调用。

话不多说，直入主题：

开发中，从网络上加载数据一直是重点和难点，尤其是在做相应的细节优化方面，在React Native 中通常是用哪种

方式加载网络数据呢？ 

React Native 中通常是通过 Ajax 从服务器获取数据，在 componentDidMount 方法中创建 Ajex 请求，等到请求成功，

再用 this.setState 方法重新渲染UI

一、什么是 fetch

---

• fetch 目前还不是 W3C 规范，是由 whatag 负责研发。与 Ajax 不同的是，它的 API 不是事件机制，而是采用目前

• 流行的 Promise(MDN Promise) 方式处理

• 格式：

    fetch(url, init)
    .then((response) => {   // 数据解析方式
    })
    .then((responseData) => {       // 获取到的数据处理
    })
    .catch((error) => { // 错误处理
    })
    .done();

 
 
1
2
3
4
5
6
7
8
9
 
 
1
2
3
4
5
6
7
8
9

• 上面的示例中的 init 是一个对象，他里面包含了: 
  
  • method：请求方式（GET、POST、PUT等）。
  • headers：需要用到 Headers 对象使用这个参数。
  • body：需要发送的数据
  • mode：跨域设置(cors, no-cors, same-origin)
  • cache：缓存选项（default, no-store, reload, no-cache, force-cache, or only-if-cached）

译注：

• body:不可传对象，用JSON.stringify({…})也不可以，在jQuery 中会自动将对象封装成 formData 形式，fetch不会。
• mode属性控制师傅跨域，其中 same-origin（同源请求，跨域会报error）、no-cors(默认，可以请求其它域的资源，
• 不能访问response内的属性)和 cros(允许跨域，可以获取第三方数据，必要条件是访问的服务允许跨域访问)。
• 使用 fetch 需要注意浏览器版本，但 React-Native 则不需要考虑。

• response 对象可以有如下几种解析方式

  • arrayBuffer()
  • json()
  • text()
  • blob()
  • formData()

• 下面是一个最基本的请求，只传入一个参数，默认为 GET 方式请求

    fetch(url)
    .then((response) => response.json())        // json方式解析，如果是text就是 response.text()
    .then((responseData) => {   // 获取到的数据处理
    })
    .catch((error) => {     // 错误处理 
    })
    .done();

 
 
1
2
3
4
5
6
7
8
9
 
 
1
2
3
4
5
6
7
8
9

• 针对表单提交的请求，我们通常采用 POST 的方式。

方式一：

    fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        }
        body:"key1=value&key2=value…&keyN=value"
    })
    .then((response) => {       // 数据解析方式
    })
    .then((responseData) => {       // 获取到的数据处理
    })
    .catch((error) => { // 错误处理
    })
    .done();

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 在 JQuery 中，传入对象框架会自动封装成 formData 的形式，但是在 fetch 中没有这个功能，所以我们需要
• 自己初始化一个 FormData直接传给 body (补充：FormData也可以传递字节流实现上传图片功能)

方式二：

    let formData = new FormData();
    formData.append("参数", "值");
    formData.append("参数", "值");

    fetch(url, {
        method:'POST,
        headers:{},
        body:formData,
        }).then((response)=>{
            if (response.ok) {
                return response.json();
            }
        }).then((json)=>{
            alert(JSON.stringify(json));
        }).catch.((error)=>{
            console.error(error);
        })

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

译注：

• application/x-www-form-urlencoded： 窗体数据被编码为名称/值对。这是标准的编码格式。
• multipart/form-data： 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。
• text/plain： 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。
• Fetch 跨域请求的时候默认是不带 cookie 的,如果需要进行设置 credentials:’include’。

二、获取 HTTP 头信息

---

    console.log(response.headers.get('Content-Type'));
                        ...
    console.log(response.headers.get('Date'));

 
 
1
2
3
4
 
 
1
2
3
4

注意：使用fetch请求，如果服务器返回的中文出现了乱码，则可以在服务器端设置如下代码解决: 
produces="text/html;charset=UTF-8"

三、fetchRequest使用如下：

GET方法：

get(url, func=false) {
  return fetch(url) // GET方式 获取Json数据  
    .then((response) => {
      let data = response.json(); // 解析数据为 json格式
      return data; // 传递数据给下一步
    })
    .then((json_data) => { // 接收刚刚获取到的数据  
      // 如果有回调
      if( false!==func ){
        func(json_data);
      }
    })
    .catch ((error) => { // 从fetch开始，到最后一个then，有错误出现，则会捕捉错误。
      console.warn('Catch info：');
      console.error(error);
    });
},

如图所示：url为我们请求的url

封装的步骤就是按照官方给出的步骤，一步步走下去

POST请求:

post(url, ini_json={}, unlisted=false) {
    let token = '',   // 身份识别码
        headers = {   // http请求头
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },
        body = '',    // 用于post的数据  
        func = undefined !== ini_json.func? ini_json.func : false; // 回调函数

    // 请求时，请求地址带上token 
    if( false=== unlisted ){
      token = unlisted;// 这里是token
    }
    if( undefined !== ini_json.headers ){
      headers = init_json.headers;
    }
    // 暂不支持数组传输，已建议同类数据以逗号分隔
    if( undefined !== ini_json.data ){
      // 如果有数据
      for(let i in ini_json.data){
        body  +=  i + '=' + encodeURIComponent(ini_json.data[i]) + '&';
      }
    }
    return fetch(url, {
      method: 'POST', 
      headers:  headers, 
      body: body,
    })
    .then((response) => {
      let data = response.json(); // 解析数据为 json格式
      return data; // 传递数据给下一步
    })
    .then((json_data) => { // 接收刚刚获取到的数据  
      // 如果有回调
      if( false!==func ){
        func(json_data);
      }
    })
    .catch ((error) => { // 从fetch开始，到最后一个then，有错误出现，则会捕捉错误。
      console.warn('Catch info：');
      console.error(error);
    });
  }
}

如图所示：这个post请求加了一些业务上的逻辑。包括请求时带上token等

步骤也是按照官方的步骤，先请求--》获取数据--》回调处理--》捕获错误信息

参考链接：http://blog.csdn.net/withings/article/details/71331726

https://segmentfault.com/a/1190000006099651

end