RN之网络

很多移动应用都需要从远程地址中获取数据或资源。你可能需要给某个rest API发起post请求以提交用户数据，又或者可能仅仅需要从某个服务器上获取一些静态内容——以下就是你会用到的东西。

使用Fetch

React Native提供了和web标准一致的Fetch API，用于满足开发者访问网络的需求。如果你之前使用过XMLHttpRequest（即俗称的ajax）或是其他网络的API，那么Fetch用起来会相当容易上手。

发起请求

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

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

Fetch还有可选的第二个参数，可以用来定制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',
}),
});

提交数据的格式关键取决于headers中的Content-Type。Content-Type有很多种，对应body的格式也有区别。到底应该采用什么样的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',
});

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

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

处理服务器的响应数据

上面的例子演示了如何发起请求。很多情况下，你还需要处理服务器回复的数据。
网络请求天然是一种异步操作（同样的还有asyncstorage，无论在语法层面怎么折腾，它们的异步本质是无法变更的。异步的意思是你应该趁这个时间去做点别的事情，比如loading，而不是让界面卡主傻等）。Fetch方法会返回一个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,{Component} 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(
            
            
            
            )
        }

        return(
        
         {item.title},{item.releaseYear}}
        keyExtractor={(item,index) => item.id}
        />
        
        );
    }
}

从Android9开始，会默认阻止http请求。

使用其他的网络库

React Native中已经内置了XMLHTTPRequestAPI（也就是俗称的ajax）。一些基于XMLHTTPRequest封装的第三方库也可以使用，例如frisbee或是axios等。但注意不能使用jQuery，因为jQuery中还使用了很多浏览器中才有而RN中没有的东西（所以也不是所有web中的ajax库都可以直接使用）。

const request=new XMLHttpRequest();
request.onreadystatechange=(e) => {
    if (request.readyState !== 4) {
        return;
    }

    if (request.status == 200) {
        console.log('success',request.responseText);
    }else{
        console.warn('error');
    }
};
request.open('GET','https://mywebsite.com/endpoint/');
request.send();

运行结果如图

需要注意的是，安全机制与网页环境有所不同：在应用中你可以访问任何网站，没有跨域的限制。

WebSocket支持
React Native还支持WebSocket，这种协议可以在单个TCP连接上提供全双工的通信信道。

const ws=new WebSocket('ws://host.com/path');
ws.onopen=() => {
    //connection opened
    ws.send('something');//send a message
};

ws.onmessage=(e) => {
    //a message was received
    console.log(e.data);
};

ws.onerror=(e)=>{
    //an error occurred
    console.log(e.message);
};

ws.onclose=(e)=>{
    console.log(e.code,e.reason);
};

现在我们已经可以从各种渠道获取数据了，那么接下来面临的问题多半就是如何在不同的页面间组织和串联内容了。要管理页面的跳转，我们需要学习使用导航器跳转页面。