Reactjs学习之fetch请求

ReactJS通过fecth异步加载数据,并且不需要加载任何模块。是一种XMLHttpRequest的替代方案，除了用ajax获取后台数据外我们还可以使用fetch、axios等方式。

1.GET使用方法：

fetch("http://localhost:8002/search/" + this.state.name).then(res => {

　　return res.json() 

}).then(data=> { 

　　this.setState({content: data}) 

})

 

2.POST使用方法

fetch("http://localhost:8002/create/", {

        method: 'post',

        headers: {

            'Content-Type': 'application/json'

        },

        body: JSON.stringify({ 

　　　　　　eid: id

　　})

}).then(res =>{

　　return res.json(); 

}).then(data =>{

　　console.log(data.msg)

}).catch(e =>{

　　console.log(e)

 })

 

说明

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

2.res.json()不是用户需要的数据,通过return返回

3.data用户需要的数据

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

  headers: HTTP请求返回头,一般使用JSON数据格式，所以设置ContentType为application/json

  body:请求的参数或者返回体，返回的方法

  text(): 将返回体处理成字符串类型

  json()： 请求的时候调用JSON.stringify，返回结果调用json（）和JSON.parse(responseText)一样

  blob()： 返回一个Blob，Blob对象是一个不可更改的类文件的二进制数据