React Native 之网络请求 fetch

最新推荐文章于 2024-03-30 14:57:51 发布

铁柱同学

最新推荐文章于 2024-03-30 14:57:51 发布

阅读量1.6k

点赞数 3

分类专栏： React Native react native基础讲解文章标签： react native fetch 网络请求

本文链接：https://blog.youkuaiyun.com/LJFPHP/article/details/77727316

版权

React Native 同时被 2 个专栏收录

28 篇文章

订阅专栏

react native基础讲解

25 篇文章

订阅专栏

最近做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);
    });
  }
}