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, {Component} from "react";
import {
    Text,
    Image,
    View,
    StyleSheet,
}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",
        fontSize: 16,
        padding: 20
    },
    image_book: {
        width: 80,
        height: 80,
        resizeMode: "cover",
        marginHorizontal: 12
    },
    text_title: {
        color: "black",
        fontSize: 16,
        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,
    StyleSheet,
    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",
        fontSize: 16,
        padding: 20
    },
});

本文的所有源码在这里

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值