React Native 入门十二 - Fetch 网络请求

当前 RN 版本：0.50
操作环境：Windows 10

文章同步自简书：http://www.jianshu.com/p/b3c1b4298d18

不知不觉中，RN 0.50 已经发布了。两个多礼拜没有接触 RN 了，已经忘得差不多了，赶紧再恶补一下写写博客，否则真的会忘得一干二净。这篇文章简单介绍 RN 中的网络请求。

使用 Fetch

Fetch 使用起来很简单，只需要简单的一行代码就可以实现网络请求：

fetch(url)

它还可以有第二个可选的参数，用来进行请求的配置。比如指定 header 参数、指定 GET 或 POST 方法、提交表单数据等等。可以参考 Fetch请求文档 来查看所有可用的参数。

var options = {
  method: 'POST',headers: {
    'Accept': 'application/json','Content-Type': 'application/json',},body: JSON.stringify({
    firstParam: 'yourValue',secondParam: 'yourOtherValue',})
};

fetch(url,options);

发起请求之后要对请求到的数据进行处理， Fetch 使用链式调用的方式来进行操作，格式如下：

fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => { // 获取到网络请求返回的对象 response.json() }) .then((result) => { // 网络请求成功，处理请求到的数据 }) .catch((error) => { // 网络请求失败，处理错误信息 });

你还可以使用 ES7 标准中的 async/await 语法：

// 注意这个方法前面有 async 关键字
  async getMoviesFromApi() {
    try {
      // 注意这里的 await 语句，其所在的函数必须有 async 关键字声明
      let response = await fetch('https://facebook.github.io/react-native/movies.json');
      let result = await response.json();
      return responseJson.movies;
    } catch(error) {
      console.error(error);
    }
  }

Promise 封装

Promise 是专门用来处理异步请求的。由于我对它也不是很熟悉，大家可以在网上查询更多的资料。

我们写个工具类 HttpUtil.js 并在其中利用 Promise 封装 get 和 post 方法，代码参考如下。

export default class HttpUtil {

  /**
   * 利用 Promise 的 get 方式请求
   * @param url
   * @returns {Promise}
   */
  static get(url) {
    return new Promise((resolve,reject) => { fetch(url) .then(response => response.json()) .then(result => resolve(result)) .catch(error => reject(error)) }) } /** * 利用 Promise 的 post 方式请求 * @param url * @param params * @returns {Promise} */ static post(url,params) { return new Promise((resolve,reject) => { fetch(url,{ method: 'POST',headers: { 'Accept': 'application/json','Content-Type': 'application/json' },body: JSON.stringify(params) }) .then(response => response.json()) .then(result => resolve(result)) .catch(error => reject(error)) }) } }

接下来我们需要进行网络请求的时候就可以直接使用了。

export default class FetchTest extends Component {

  constructor(props) {
    super(props);
    this.state = {
      text: '返回结果'
    }
  }

  get() {
    HttpUtil.get('https://facebook.github.io/react-native/movies.json')
        .then(result => this.setState({text: JSON.stringify(result)}))
        .catch(error => console.error(error))
  }

  post() {
    var data = {username: 'ayuhani',password: '123456'}
    HttpUtil.post('http://rapapi.org/mockjsdata/26411/ayuhani/post',data)
        .then(result => this.setState({text: JSON.stringify(result)}))
        .catch(error => console.error(error))
  }

  render() {
    return <View style={{flex: 1}}>
      <View style={{margin: 16}}>
        <Button
            title={'get'}
            onPress={() => this.get()}
        />
        <Button
            title={'post'}
            onPress={() => this.post()}
        />
        <Text style={{marginTop: 16}}>{this.state.text}</Text>
      </View>
    </View>
  }
}

看一下运行效果：

代码确实简洁了不少，当然应该还有更好的封装方法，以后学到了再来分享吧。