React-Native之（小白计划八）Fetch以及封装

Z时代
2024-01-10
分类：综合

react

封装前代码：

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Button,
} from 'react-native';
export default class FlatListDemo extends Component<Props> {
    constructor(props){
        super(props);
        this.state={
            result:'',//初始化数据为空
        }
    }
    static navigationOptions = {
        title: 'Fetch',
    };
    //get数据
    onLoad=(url)=>{
        fetch(url)//默认是GET
            .then(response=>response.json())//把数据解析成json格式,然后取出
            .then(result=>{
                this.setState({
                    result:JSON.stringify(result),//序列化：转换为一个 (字符串)JSON字符串
                });
            })
            .catch(error=>{
            this.setState({
                result:JSON.stringify(error),//把错误信息格式化为字符串
            });
        })
    };
    //模拟登陆Post
    onSubmit=(url,data)=>{
        fetch(url,{
            method:'POST',
            header:{
                'Accept':'application/json',//告诉服务器，我们能接受json格式的返回类型，
                'Content-Type':'application/json',//告诉服务器，我们提交的数据类型
            },
            body:JSON.stringify(data),//(把你想提交得数据序列化为json字符串类型，然后提交)body中的数据就是我们需要向服务器提交的数据,比如用户名,密码等
        })//返回 服务器处理的结果
            .then(response=>response.json())
            .then(result=>{
                this.setState({
                    result:JSON.stringify(result),//序列化：转换为一个 (字符串)JSON字符串
                });
            })
            .catch(error=> {
                this.setState({
                    result: JSON.stringify(error),//把错误信息格式化为字符串
                })
            })
    };
    render() {
        return (
            <View style={styles.container}>
                <Button
                    title={"获取数据"}
                    onPress={()=>this.onLoad('http://api.douban.com/v2/movie/top250')}
                />
                <Text/>
                <Button
                    title={"提交数据"}
                    onPress={()=>this.onSubmit('http://api.douban.com/v2/movie/top250',{username:'小白',password:'123456'})}
                />
                <Text>返回结果：{this.state.result}</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }

});

效果:

封装后代码：

1：HttpUtils页（封装的函数）

//一个 Promise 就是一个代表了异步操作最终完成或者失败的对象
export default class HttpUtils{
    static get=(url)=>{
        return new  Promise(((resolve, reject) => {//resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）
            fetch(url)//默认是GET
                .then(response=>response.json())//把数据解析成json格式,然后取出
                .then(result=>{
                       resolve(result);//表示完成
                })
                .catch(error=>{
                        reject(error);//表示失败
                })
            })
        )
    };
    static post=(url,data)=>{
        return new Promise(((resolve, reject) => {
            fetch(url,{
                method:'POST',
                header:{
                    'Accept':'application/json',//告诉服务器，我们能接受json格式的返回类型，
                    'Content-Type':'application/json',//告诉服务器，我们提交的数据类型
                },
                body:JSON.stringify(data),//(把你想提交得数据序列化为json字符串类型，然后提交)body中的数据就是我们需要向服务器提交的数据,比如用户名,密码等
            })//返回 服务器处理的结果
                .then(response=>response.json())
                .then(result=>{
                    resolve(result);
                })
                .catch(error=> {
                    reject(error);
                })
            })
        )
    }
}//数据转换成字符串 JSON.stringify(params)      //将数据JSON化 JSON.parse(responseJSON)

2：HomePage页（调用封装函数的那一页）

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Button,
} from 'react-native';
import HttpUtils from './HttpUtils';//把封装好的组件导入
export default class FlatListDemo extends Component<Props> {
    constructor(props){
        super(props);
        this.state={
            result:'',//初始化数据为空
        }
    }
    static navigationOptions = {
        title: 'Fetch封装',
    };
    //get数据
    onLoad=(url)=>{
        HttpUtils.get(url)//调用自定义组件方法，返回一个Promise
            .then(result=>{//then函数会返回一个新的promise
                this.setState({
                    result:JSON.stringify(result),//序列化：转换为一个 (字符串)JSON字符串
                });
            })
            .catch(error=> {
                this.setState({
                    result: JSON.stringify(error),//把错误信息格式化为字符串
                })
            })
    };
    //模拟登陆Post
    onSubmit=(url,data)=>{
        HttpUtils.post(url,data)
            .then(result=>{
                this.setState({
                    result:JSON.stringify(result),//序列化：转换为一个 (字符串)JSON字符串
                });
            })
            .catch(error=> {
                this.setState({
                    result: JSON.stringify(error),//把错误信息格式化为字符串
                })
            })
    };
    render() {
        return (
            <View style={styles.container}>
                <Button
                    title={"获取数据"}
                    onPress={()=>this.onLoad('http://api.douban.com/v2/movie/top250')}
                />
                <Text/>
                <Button
                    title={"提交数据"}
                    onPress={()=>this.onSubmit('http://api.douban.com/v2/movie/top250',{username:'小白',password:'123456'})}
                />
                <Text>返回结果：{this.state.result}</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});