React Native0.61之网络请求

很多移动应用都需要从远程地址中获取数据或资源。您可能需要给某个REST API发起POST请求以提交用户数据，又或者可能仅需要从某个服务器上获取一些静态内容-以下就是你会新手可以对照这个替换的视频教程加深理解。

使用提取

React Native提供了和web标准一致的Fetch API，用于满足开发者访问网络的需求。如果您之前使用过XMLHttpRequest（即俗称的ajax）或其他的网络API，那么Fetch就用起来就会相当容易上手。这篇文档只会列出Fetch的基本用法，并不会带来太多细节，你可以使用你喜欢的搜索引擎去搜索fetch api关键字以了解更多信息。

发起请求

要从任意地址获取内容的话，只需简单地将网址作为参数传递给fetch方法即可（fetch这个词本身也就是获取的意思）：

fetch('https://mywebsite.com/mydata.json');

获取另外可选的第二个参数，可以使用自定义HTTP请求一些参数。您可以指定header参数，或者指定使用POST方法，又或者提交数据等等：

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

提交数据的格式必须由标头中性Content-Type。Content-Type有很多不同，对应正文的格式也有区别。到底应该采用什么样的Content-Type服务器端，所以请和服务器端的开发人员沟通确定清楚。常用的'Content-Type '除了上面的'application / json'，还有传统的网页表单形式，示例如下：

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: 'key1=value1&key2=value2',
});

可以参考获取请求文档来查看所有可用的参数。

注意：使用Chrome调试当前无法观察到React Native中的网络请求，您可以使用第三方的react-native-debugger来进行观察。

处理服务器的响应数据

上面的示例演示了如何发起请求。很多情况下，你还需要处理服务器回复的数据。

网络请求天然是一种异步操作（译注：同样的还有asyncstorage，请不要再问如何把异步变成同步！无论在语法上怎么折腾，它们的本质本质是无法改变的。提取方法会返回一个Promise，这种模式可以简化异步样式的代码（译注：同样的，如果你不了解承诺，建议使用搜索引擎补课）：

function getMoviesFromApiAsync() {
  return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}

 

你也可以在React Native应用中使用ES2017标准中的async/ await语法：
 

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

别忘了catch住fetch可能引发的异常，否则错误时你可能看不到任何提示。

import React from 'react';
import { FlatList, ActivityIndicator, Text, View  } from 'react-native';

export default class FetchExample extends React.Component {

  constructor(props){
    super(props);
    this.state ={ isLoading: true}
  }

  componentDidMount(){
    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isLoading: false,
          dataSource: responseJson.movies,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }



  render(){

    if(this.state.isLoading){
      return(
        <View style={{flex: 1, padding: 20}}>
          <ActivityIndicator/>
        </View>
      )
    }

    return(
      <View style={{flex: 1, paddingTop:20}}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) => <Text>{item.title}, {item.releaseYear}</Text>}
          keyExtractor={(item, index) => item.id}
        />
      </View>
    );
  }
}

默认情况下，iOS设备会阻止所有HTTP的请求，以督促开发者使用HTTPS。如果你仍然需要使用HTTP协议，那么首先需要添加一个应用程序传输安全的例外，柯林斯详细参考这篇日志相册。

从Android9开始，也会默认停止http请求，请参考相关配置