react native学习笔记8——网络请求

react native提供ajax和fetch的网络请求的方式，ajax即XMLHttpRequest (XHR)，是一种传统的网络请求的方式，其配置和调用方式比较混乱，不符合职责分离的原则，基于事件的异步模型的写法，没有采用Promise的fetch简洁。因此本文重点介绍fetch进行网络请求的用法，关于ajax只介绍其基本使用方法。

fetch

fetch的基本格式为：

fetch(url,fetchOptions) //发起网络请求
    .then((response) => {   
    // 数据解析方式
    })
    .then((responseData) => {       
    // 获取到的数据处理
    })
    .catch((error) => { 
    // 错误处理
    })
    .done();

发起网络请求

上述示例的第一行fetch(url,fetchOptions)为发起网络请求的写法。fetch(url) 为发起网络请求的最简单的写法，只传入一个参数，默认为 GET 方式请求，将网址作为参数传入fetch方法即可，举个例子：

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

此外fetch还有可选的第二个参数，即示例中的fetchOptions，它可以用来定制HTTP请求的一些参数，如可以指定请求方式是POST还是GET(如果fetch没有设第二个参数即默认GET方式请求)，还可指定请求头header参数以及要提交的数据。例如：

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

fetchOptions是一个对象，它包含了如下可选参数的设置:

method：请求方式（GET、POST、PUT等）。
headers：请求头。
body：需要发送的数据。
mode：控制是否允许跨域(cors,no-cors,same-origin)。
cache：缓存设置（default,no-store,reload,no-cache,force-cache,or only-if-cached）。

参数解释：
1. headers请求头遵循http协议规范，通常设置Accept、Content-Type属性。
Accept：希望接受的数据类型
Content-Type：发送的实体数据的数据类型

headers: {
'Accept': 'application/json',//希望接受的数据类型为json
'Content-Type': 'application/json',//发送的实体数据的数据类型为json
}

2.body的传入参数有三种方式：

方式一: 不推荐，可能在某些服务器无法识别。

JSON.stringify({key1:value1,key2:value2,...})

方式二: 传统的form格式

'key1=value1&key2=value2'

方式三: 使用FormData

let formData = new FormData();
    formData.append("key1","value1");
    formData.append("key2","value2");

3.mode：控制是否允许跨域：

same-origin：同源请求，该模式是不允许跨域的，跨域请求会报error。
cros：允许跨域请求，可以获取第三方数据，前提是所访问的服务允许跨域访问。
no-cors：默认mode。该模式允许发送本次跨域请求，但是不能访问响应返回的内容，即可以请求其他域的脚本、图片和其他资源，但是不能访问response里面的属性。

如下是一个采用post方式的网络请求：

let formData = new FormData();
     formData.append("key1","value1");
     formData.append("key2","value2");
fetch(url,{
        method: "POST",headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },body:formData,})

处理服务器的响应数据

前面介绍了发起请求，接下来介绍处理服务器的响应数据。fetch由于采用了promise的异步处理方式，因此在写网络请求这种异步操作特别简洁顺滑。

fetch('https://facebook.github.io/react-native/movies.json')   //发起网络请求
      .then((response) => response.json())    // 数据解析方式
      .then((responseJson) => {  // 获取到的数据处理
        return responseJson.movies;
      })
      .catch((error) => {   // 错误处理
        console.error(error);
      });

ES6箭头的写法类似于android开发中的Lambda表达式，将异步的操作以同步的形式展现出来，但这里我们要注意，不管语法上怎么改变，它们的异步本质是无法变更的，这仍是一个异步操作。

客户端开发者（android或ios）在处理Json数据时需要习惯一下，React Native在处理网络返回的Json数据时，可直接操作使用，不需要像Native开发那样进行Json的转换。

示例代码如下：

const url = 'https://api.douban.com/v2/book/isbn/9787302315582';
        fetch(url)
            .then((response)=>response.json())
            .then(
                (responseJson)=> {
                     let bookinfo = responseJson;
                     console.log(bookinfo);
                }
            )
            .catch((error)=>console.error(error))

实例

下面结合前面介绍的生命周期及State、Props的知识，演示一个获取网络数据资源以列表的形式显示出来的实例。还是老规矩，先把页面的框架写出来。

1.渲染加载中的界面

在获取真实的网络数据之前，我们的界面首先要显示一个加载中Text，并设置其样式Styles.loading。

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

export default class FetchNetDataDemo extends Component {
    render() {
            return (
                <Text style={Styles.loading}>加载中...</Text> ) } } const Styles = StyleSheet.create({ loading:{ textAlign: "center",fontSize: 16,padding: 20 },})

2.获取网络数据

下面将通过豆瓣提供的api获取网络上一个真实的书本信息。在上一节组件的生命周期中介绍过，组件初始化阶段由constructor开始，我们先初始化书本信息。

constructor(props) {
        super(props);
        this.state = {
            bookinfo: null
        };
    }

组件在渲染render完成后会主动回调componentDidMount函数，componentDidMount方法只会在组件完成加载的时候调用一次。我们在componentDidMount中执行获取网络数据的方法fetchBookinfoList，修改组件状态：

fetchBookinfoList() {
        const url = 'https://api.douban.com/v2/book/isbn/9787302315582';
        fetch(url)
            .then((response)=>response.json())
            .then(
                (responseJson)=> {
                    let bookinfo = responseJson;
                    console.log(bookinfo);
                    this.setState({
                        bookinfo: bookinfo,})
                }
            )
            .catch((error)=>console.error(error))
 }

 componentDidMount() {
        this.fetchBookinfoList();
 }

3.将获取到的网络数据显示在界面上

修改render()方法，当this.state.bookinfo数据不为空时显示书本信息，否则显示一个正在加载的视图。

render() {
        let item = this.state.bookinfo;
        if (item) {
            return this.renderItem(item);
        }else {
            return (
                <Text style={Styles.loading}>加载中...</Text> ) } } renderItem(item) { return ( <View style={Styles.container}> <Image style={Styles.image_book} source={{uri: item.image}}/> <View style={Styles.right}> <Text style={Styles.text_title}>{item.title}</Text> <Text style={Styles.text_price}>{item.publisher}</Text> </View> </View> ) }

重新刷新，首先会看到”加载中…”提示语直到网络请求数据加载完成。

完整代码示例：

import React,}from 'react-native';

export default class FetchNetDataDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            bookinfo: null
        };
    }

    //发起网络请求，获取数据
    fetchBookinfoList() {
        const url = 'https://api.douban.com/v2/book/isbn/9787302315582';
        fetch(url)
            .then((response)=>response.json())
            .then(
                (responseJson)=> {
                    let bookinfo = responseJson;
                    console.log(bookinfo);
                    this.setState({
                        bookinfo: bookinfo,})
                }
            )
            .catch((error)=>console.error(error))
    }

    //页面渲染完成后会调用该方法
    componentDidMount() {
        this.fetchBookinfoList();
    }

    render() {
        let item = this.state.bookinfo;
        if (item) {
            return this.renderItem(item);
        }else {
            return (
                <Text style={Styles.loading}>加载中...</Text> ) } } //绘制展示数据的界面 renderItem(item) { return ( <View style={Styles.container}> <Image style={Styles.image_book} source={{uri: item.image}}/> <View style={Styles.right}> <Text style={Styles.text_title}>{item.title}</Text> <Text style={Styles.text_price}>{item.publisher}</Text> </View> </View> ) } } const Styles = StyleSheet.create({ container: { backgroundColor: "white",height: 100,flexDirection: "row",alignItems: "center" },right: { flexDirection: "column",height: 80,flexGrow: 1,loading:{ textAlign: "center",image_book: { width: 80,resizeMode: "cover",marginHorizontal: 12 },text_title: { color: "black",lineHeight: 24,text_price: { color: "gray",fontSize: 12,lineHeight: 20,})

ajax

XMLHttpRequest 即俗称的ajax，React Native 中 XMLHttpRequest 的实现几乎和 Web 是一样的，不同的是在React Native 中XMLHttpRequest API不存在跨域的限制。其写法如下：

let request = new XMLHttpRequest();
        request.onreadystatechange = (e) => {
            if (request.readyState !== 4) {
                return;
            }
            if (request.status === 200) {
                console.log(request.responseText);
            } 
        };
        request.open('GET','http://www.weather.com.cn/data/cityinfo/101010100.html');
        request.send();

样例代码:

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

//默认应用的容器组件
export default class XMLHttpRequestDemo extends Component {

    //构造函数
    constructor(props) {
        super(props);
        this.state = {
            responseText: "请求网络数据"
        };
    }

    //渲染
    render() {
        return (
            <View style={styles.container}> <Text style={styles.item}>{this.state.responseText}</Text> </View> ); } componentDidMount() { this.doXMLHttpRequest(); } //使用XMLHttpRequest请求数据 doXMLHttpRequest(){ let request = new XMLHttpRequest(); request.onreadystatechange = (e) => { if (request.readyState !== 4) { return; } if (request.status === 200) { this.setState({responseText: request.responseText}) console.log(request.responseText); } else { alert("请求失败！"); } }; request.open('GET','http://www.weather.com.cn/data/cityinfo/101010100.html'); request.send(); } } //样式定义 const styles = StyleSheet.create({ container:{ flex: 1,marginTop:25 },item:{ textAlign: "center",});

本文的所有源码在这里

原文链接：https://www.f2er.com/react/302876.html