今天的码农女孩学习了关于react的ajax的知识

本文介绍了在React中如何使用fetch API进行Ajax请求,包括安装whatwg-fetch库,fetch的使用方法,如设置请求方式、请求头,处理响应数据等,并强调了应在组件的componentDidMount生命周期方法中发起请求。
摘要由CSDN通过智能技术生成

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 中发起网络请求将保证这有一个组件可以更新了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值