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