React Native 基础之网络请求

React Native 提供了和 web 标准一致的Fetch API,用于满足开发者访问网络的需求。

Fetch 语法

使用 fetch 的构造函数请求数据后,返回一个 Promise 对象,然后根据具体的实际情况处理。

fetch("http://baidu.com")  
.then(function(response){  
   // ...
})

说明:
在请求后的 Response 中,常常有如下返回情况:

  • Response.status 也就是 StatusCode,如成功就是 200 ;
  • Response.statusText 是 StatusCode 的描述文本,如成功就是 OK ;
  • Response.ok 一个 Boolean 类型的值,判断是否正常返回,也就是 StatusCode 为 200-299 。

Fetch 请求方式

1. get方式

fetch('http://nero-zou.com/test', {  
    method: 'GET'
}).then(function(response) {
    //获取数据,数据处理
}).catch(function(err) {
    //错误处理
});

2. post方式

let param = {user:'xxx',phone:'xxxxxx'};
fetch(url, {  
    method: 'post',
    body: JSON.stringify(param)
}).then(function(response) {
    //获取数据,数据处理
});

对Fetch进行封装

(1)这里我们对 Fetch 进行一个封装,实现一个支持 POST 请求的简单 API。

//带参数的POST请求
function postRequest(url, data, callback) {
  var opts = {
    method: 'POST',
    headers: {
      'Accept': 'application/json'
    },
    body: JSON.stringify(data)
  }
 
  fetch(url, opts)
  .then((resonse) => resonse.text())
  .then((responseText) => {
    //将返回的JSON字符串转成JSON对象,并传递到回调方法中
    callback(JSON.parse(responseText));
  });
}

(2)使用样例

var data = {id:123, name:'hangge.com'};
postRequest('https://httpbin.org/post', data, function(result){
  alert("请求成功!");
  console.log(result);
})

实例

1.逻辑代码

import React, {Component} from 'react';
import {
  StyleSheet, 
  Text, 
  Image,
  View
} from 'react-native';

var REQUEST_URL =
  "https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movies: null,
    };
    this.fetchData = this.fetchData.bind(this);
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          movies: responseData.movies,
        });
      });
  }

  render() {
    if(!this.state.movies) {
      return this.renderLoadingView();
    }
    var movie = this.state.movies[0];
    return this.renderMovie(movie);
  }

  renderLoadingView() {
    return (
      <View style = {styles.container}>
        <Text>loading...</Text>
      </View>
    );
  }

  renderMovie(movie) {
    return(
      <View style = {styles.container}>
        <Image 
          style = {styles.thumbnail}
          source = {{uri: movie.posters.thumbnail}}
        />

        <View style = {styles.rightContainer}>
          <Text style = {styles.title}>{movie.title}</Text>
          <Text style = {styles.year}>{movie.year}</Text>
        </View>

      </View>
    );
  }
  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail: {
    width: 100,
    height: 80
  },
  rightContainer: {
    flex: 1
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'center'
  },
  year: {
    textAlign:'center'
  }
});

2. 效果图

fetch.jpg

推荐阅读更多精彩内容

  • 【原文】道虽迩,不行不至;事虽小,不为不成。 【典出】战国·荀况《荀子·修身篇第二》 【释义】道路即使很近,不走也...
    _郭永山_阅读 15评论 0 0
  • 历时3个月的紧张准备,美国注册会计师的考试终于结束了,想想可以自由安排自己的时间做想做的事等着考试结果,心情就特别...
    宇妈说阅读 41评论 0 1
  • 身在异乡 心在漂流 无处安放
    千叶Ares阅读 153评论 1 4
  • 听完张伯特的话,小卡完全是一副生无可恋的表情。他沮丧的把脑袋一耷拉,苦笑着说道:“哈哈哈,奖励我?唉呀,你果然不愧...
    智子视界阅读 23评论 0 0
  • 每次和冬梅的对话都会让我备受启发,昨天的也是。像往常一样,通话是从我的一个求助信息开始的,本来是微信上给我解释,然...
    WEI_曹蕾阅读 191评论 2 4