react中内置的fetch模块

最新推荐文章于 2024-08-27 07:28:01 发布

Han_Zhou_Z

最新推荐文章于 2024-08-27 07:28:01 发布

阅读量1.3k

点赞数 2

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/Han_Zhou_Z/article/details/123389591

版权

一、react中内置的fetch模块的使用

1、fetch是react内置的XMLHttpRequest对象的替代方案,使用时不需要安装

2、使用方法

fetch(url).then(res => {
            return res.json() //res不是需要的请求数据
        }).then(data => {
            console.log(data) //data是请求数据
        }).catch(e =>{
           console.log(e) //e是异常信息
        })

说明：

（1）fetch的返回值是一个promise对象

（2）options表示对象格式的参数

method:HTTP请求方式，默认是GET

body:请求的参数

若发送的是json格式参数,则需要使用JSON.stringify({id:'123'})

fetch(`${HOST}:${PORT}/bookapi/books`,{
            method:'get',
            headers:{
                'Content-Type':'application/json'
            }
        }).then(res=>{
            console.log(res)
            return res.json()  //将服务器发送的响应头信息返回给浏览器
        }).then(data=>{ //服务器返回给客户端的数据
            _this.setState({
                data: data
            })
        }).catch(err=>{
            console.log(err)
        })
    }

headers:HTTP请求头，可以设置响应头的信息

因为一般使用JSON数据格式，所以设置ContentType为application/json

credentials:默认为omit,忽略的意思，也就是不带cookie还有两个参数，same-origin，意思就是同源请求带cookie；include,表示无论跨域还是同源请求都会带cookie

3、总结

（1）fetch更底层,只处理请求失败的错误,对于400、500等异常它任务是请求成功的

（2）fetch是XMLHttpRequest对象的代理(替代方案),运行与 XMLHttpRequest对象没有关系

（3）axios是XMLHttpRequest对象的封装,底层的实现依然使用的是XMLHttpRequest对象