React-Native中网络请求的总结

骑猪看日落 2022-08-21 05:49 14阅读 0赞

转载请标明出处:[http://blog.csdn.net/u010046908/article/details/50916511本文出自:【李东的博客】][http_blog.csdn.net_u010046908_article_details_50916511]

前几篇文章写了关于React-Native中自己遇到的this的问题和组件嵌套的问题做了总结。今天要写的是关于React-Native中的网络请求的实现。  
\#\#1.get的请求方式的实现

//get请求
      static  get(url, callback) {
          fetch(url)
          .then((response) => response.text())
          .then((responseText) => {
            callback(JSON.parse(responseText));
          }).done();
        }

get请求很是简单基本就是这样，再不多说了。

\#\#2.Post请求的实现  
post请求我在这里写了两种形式，一种是Content-Type为application/json的形式，另一种是Content-Type为application/x-www-form-urlencoded。  
\#\#\#2.1 application/json的形式

static postJson (url, data, callback) {
        var fetchOptions = {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            //json形式
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        };
    
      fetch(url, fetchOptions)
        .then((response) => response.text())
        .then((responseText) => {
          callback(JSON.parse(responseText));
        }).done();
      }

\#\#\#2.2 application/x-www-form-urlencoded的形式

static  postFrom(url, data, callback) {
          var fetchOptions = {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              //表单
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            body:'data='+data+''
          };
    
          fetch(url, fetchOptions)
          .then((response) => response.text())
          .then((responseText) => {
            callback(JSON.parse(responseText));
          }).done();
        }

\#\#3 NetUtil的实现

/**
     * NetUitl 网络请求的实现
     * @author lidong
     * @date 2016-03-17 
     * https://github.com/facebook/react-native
     */
    'use strict';
    import React, {
      Component,
    } from 'react-native';
    
    class NetUitl extends React.Component {
    
      //post请求
      /**
      *url :请求地址
      *data:参数
      *callback:回调函数
      */
      static  postFrom(url, data, callback) {
          var fetchOptions = {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            body:'data='+data+''//这里我参数只有一个data,大家可以还有更多的参数
          };
    
          fetch(url, fetchOptions)
          .then((response) => response.text())
          .then((responseText) => {
            callback(JSON.parse(responseText));
          }).done();
        }
      /**
      *url :请求地址
      *data:参数(Json对象)
      *callback:回调函数
      */
    static postJson (url, data, callback) {
        var fetchOptions = {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            //json形式
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        };
    
      fetch(url, fetchOptions)
        .then((response) => response.text())
        .then((responseText) => {
          callback(JSON.parse(responseText));
        }).done();
      }
      //get请求
      /**
      *url :请求地址
      *callback:回调函数
      */
      static  get(url, callback) {
          fetch(url)
          .then((response) => response.text())
          .then((responseText) => {
            callback(JSON.parse(responseText));
          }).done();
        }
    
    }
    
    module.exports = NetUitl;

\#\#4. 调用方法：  
\#\#\#4.1 get的调用方法：

NetUtil.get("http://v.juhe.cn/weather/index?format="+format+"&key="+key+"&cityname="+cityname,function  (ret) {
          //回调的结果处理;
       })

\#\#\#4.2 postJson的调用

\#\#\#4.3postFrom的调用

let url = Global.LOGIN;
      let map = new Map()
      map.set('username',phone);
      map.set('password',pwd);
      let sx = Util.mapToJson(Util.tokenAndKo(map));
      NetUitl.postFrom(url,sx,function (set){
        switch (set.retCode) {
          case "0000":
              alert("登录成功");
            break;
         case "0001":
            alert("登录失败");
              break;
          default:
          alert("登录失败");
        }
      });

以上就是React-Native中的网络请求的实现，欢迎大家来共同学习，有问题可以联系QQ:1561281670

这里是我的一个学习React-Native的开源库：[点击这里][Link 1]

[http_blog.csdn.net_u010046908_article_details_50916511]: http://blog.csdn.net/u010046908/article/details/50916511%E6%9C%AC%E6%96%87%E5%87%BA%E8%87%AA:%E3%80%90%E6%9D%8E%E4%B8%9C%E7%9A%84%E5%8D%9A%E5%AE%A2%E3%80%91
[Link 1]: https://github.com/lidong1665/health