react的ajax
fetch:底层封装了promise,语法写作简单,可以实现异步函数,访问后台接口,更高效更安全,支持大部分浏览器,默认不携带cookie,但是可以手动设置
安装
npm install -S whatwg-fetch
语法
fetch("https://114.55.145.59:8443/librarytag/tag",{
method:"get",//请求方式
headers:{"Content-Type":"application/json"},//请求头
}).then(function(res){
console.log(res)
return res.json()
})
.then(function(data){
console.log(data)
th.setState({arr:data})
})
.catch(e=>{console.log(e)})
属性
method 请求方式,默认get请求
headers 请求头
body:JSON.stringfy({name:"",age:""})请求的参数
node 是否跨域
cors支持跨域 same-origin不允许跨域
then成功的回调函数
catch失败的回调函数
res是Response对象
res.status http状态码
res.json() promise里的值 json类型
res.text()接收文本类型
blob() 返回一个blob,二进制数据
cookie传递
header参数里面加上credentials:"include",才可以携带
应该在 React 组件的何处发起 Ajax 请求
在 React 组件中,应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行,在组件的生命周期中仅会执行一次。更重要的是,你不能保证在组件挂载之前 Ajax 请求已经完成,如果是这样,也就意味着你将尝试在一个未挂载的组件上调用 setState,这将不起作用。在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。