1.ajax
再react中使用ajax和直接使用ajax的用法是完全一样的,只要找好路径即可,但是也有不一样的地方,再react中是通过改变状态state来达到让组件重新渲染的效果,并且放ajax的钩子函数一般会放在实例化期的componentDidMount中,因为再这个时候真实已经渲染完成了(再写的时候数据请求过来之后直接让请求回来的数据加载到DOM中)不管是同源也好还是跨域也好都可以使用ajax来完成实现
$.ajax({
url:"",
type:"get",
data:{"name":namea},
dataType:"json",
success:function(rel){
alert(rel.data.name)
this.setState({
name:rel
})
// console.log(rel)
}.bind(this), //注意点 需要用bind(this) 找到当前组件中的this
error:function(){ console.log("error") } // })
2.fetch
1、fetch:时基于原生得XMLHtppRequest对象来实现得数据请求,同时fetch也是基于Promise对象实现调用得
fetch得本质就是实现ajax得封装和pormise得实现
fetch再请求数据之后会返回一个Promise对象,对于Promise对象来说,它有成功resolve和失败reject两个结果,只要有返回数据得话那么Promise就返回得时resolve,只有再网络错误或请求被阻止得话才会返回reject
因为fetch返回得是一个promise对象,对于Promise对象来说再处理返回得数据得时候使用得是then方法进行处理得,所以对于fetch来说也是用得是then方法对数据进行处理得
2、fetch需要配置得参数:
url:请求得路径
method:请求方式
dataType:返回得数据类型
body:提交得数据,需要使用JSON.stringify()转化成json格式得字符串
then:回调函数进行处理得
请求回来得数据需要使用json()方法进行解析才能获取这些数据
mode:请求得放式是否跨域
headers:设置得是请求得头部信息
fetch("url",{
method:"get",
dataType:'json',
mode:"cors", //是否可以跨域
headers:{'Content-type':"application/x-www-form-urlencoded"},
//判断的请求头部信息
// body:JSON.stringify({})
}).then((response)=>{ //第个then方法回去得是返回值
return response.json()//使用json ()方法返回得是一个promise对象, 如果想要获
//取当前promise对象中得数据得话,再次需要使用then方法进行处理才
}).then((res)=>{ //获取promise对象中成功或失败返回的数据
this.setState({
name:res
})
console.log(res)
})