React-Native中网络请求的总结

发布时间：2020-12-15 07:14:27 所属栏目：百科来源：网络整理

导读：前几篇文章写了关于React-Native中自己遇到的this的问题和组件嵌套的问题做了总结。今天要写的是关于React-Native中的网络请求的实现。 1.get的请求方式的实现 //g et请求 static get(url,callback) { fetch(url) . then ((response) = response.text()) . t

前几篇文章写了关于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'
      },0);">body: JSON.stringify(data)
    };

  fetch(url,fetchOptions)
    . 
  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 
  
  2.2 application/x-www-form-urlencoded的形式 
 static  postFrom(url,callback) {
      var fetchOptions = {
        headers: {
          //表单
          'application/x-www-form-urlencoded'
        },0);">body:'data='+data+''
      };

      fetch(url,fetchOptions)
      . 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  
  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,callback) {
      var fetchOptions = {
        method: ''//这里我参数只有一个data,大家可以还有更多的参数
      };

      fetch(url,fetchOptions)
      .then((response) => response.text())
      .then((responseText) => {
        callback(JSON.parse(responseText));
      }).done();
    }
  /** *url :请求地址 *data:参数(Json对象) *callback:回调函数 */
static postJson (url,callback) {
    var fetchOptions = {
      method: //json形式
        //get请求
  /** *url :请求地址 *callback:回调函数 */
  static  get(url,callback) {
      fetch(url)
      .then((response) => response.text())
      .then((responseText) => {
        callback(JSON.parse(responseText));
      }).done();
    }

}

module.exports = NetUitl; 
  
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32 
  33 
  34 
  35 
  36 
  37 
  38 
  39 
  40 
  41 
  42 
  43 
  44 
  45 
  46 
  47 
  48 
  49 
  50 
  51 
  52 
  53 
  54 
  55 
  56 
  57 
  58 
  59 
  60 
  61 
  62 
  63 
  64 
  65 
  66 
  67 
  68 
  69 
  70 
  71 
  72 
  73 
  74 
  
  
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32 
  33 
  34 
  35 
  36 
  37 
  38 
  39 
  40 
  41 
  42 
  43 
  44 
  45 
  46 
  47 
  48 
  49 
  50 
  51 
  52 
  53 
  54 
  55 
  56 
  57 
  58 
  59 
  60 
  61 
  62 
  63 
  64 
  65 
  66 
  67 
  68 
  69 
  70 
  71 
  72 
  73 
  74 
  
  4. 调用方法： 
  4.1 get的调用方法： 
 NetUtil.get("http://v.juhe.cn/weather/index?format="+format+"&key="+key+"&cityname="+cityname,function (ret) {
      //回调的结果处理;
   }) 
  
  1 
  2 
  3 
  
  
  1 
  2 
  3 
  
  4.2 postJson的调用 
 let data={'username':'123',0);">'password':'123456',0);">'token':'HSHSIHIFAUINNSNAFKSKJFNKFKFNFNFNK'};
NetUitl.postJson(url,102);">(set){
    switch (set.retCode) {
      case "0000":
          alert("登录成功");
        break;
     "0001":
        alert("登录失败");
          break;
      default:
      alert("登录失败");
    }
  }); 
  
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  
  
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  
  4.3postFrom的调用 
 let url = Global.LOGIN;
  let map = new Map()
  map.set('username',phone);
  'password',pwd);
  let sx = Util.mapToJson(Util.tokenAndKo(map));
  NetUitl.postFrom(url,sx,function (set){
    switch (set.retCode) {
      "登录成功");
        break;
     "登录失败");
          break;
      default:
      alert( 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  
  
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  
  以上就是react-Native中的网络请求的实现转载请标明出处:http://www.52php.cn/article/p-qfauherj-rd.html本文出自:【李东的博客】 
  这里是我的一个学习React-Native的开源库：点击这里

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!