Fetch封装<一>

Fetch使用

Get=(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
Post=(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),//把错误信息格式化为字符串
            })
        })
};

HttpUtils页（封装的函数）

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)

重新调用

 Get=(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=(url,data)=>{
    HttpUtils.post(url,data)
        .then(result=>{
            this.setState({
                result:JSON.stringify(result),//序列化：转换为一个 (字符串)JSON字符串
            });
        })
        .catch(error=> {
            this.setState({
                result: JSON.stringify(error),//把错误信息格式化为字符串
            })
        })
};