6、react中的交互

 

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)
        })