react--数据请求

get请求

静态数据        不方便修改，而且只能通过本页面进行修改

请求json数据，完成页面渲染

数据库

为了方便数据的操作，我们平时在页面上看到的数据一般都是在线数据，通过后台系统管理，能够很方便实现对数据的修改

在此，就不多做演示！！！

在线接口

书写数据接口，通过后台操作，读取数据库数据，并形成接口的形式，我们需要对数据进行操作的时候，直接操作接口即可

post数据请求

核心代码，需注意

            var url = 'http://127.0.0.1:8899/api/insertData'
                var options = {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: 'name=1&sex=2&email=3&phone=4&address=5'
                }
            fetch(url,options)
            .then((res)=>{
                return res.json()
            })
            .then((res)=>{
                console.log(res)
            })

第二种方式

 componentDidMount(){
            var data = {
                name:"1",
                sex:"2",
                email:"3",
                phone:"4",
                address:"5"
            }
            fetch('http://127.0.0.1:8899/api/insertData',{
                method: 'POST',
                body: `data=${JSON.stringify(data)}`,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                  }
            })
            .then((res)=>{
                console.log(res.json())
            })
        }

Content-Type： 上传文件的时候，一定要设置为application/x-www-form-urlencoded

跨域

fetch跨域概述

在fetch跨域配置中有mode选项，提供了跨域的能力

• mode: 'cors', // no-cors, cors, *same-origin

• mode:'cors'

  • 这个选项提供了跨域的能力, 但是服务端必须支持 cors ,也就是设置 res.header("Access-Control-Allow-Origin", "*");

• mode:'no-cors'

  • 可以跨域进行数据请求 , 不需要设置跨域 header
  • 在该模式下 得到的返回数据中 type为opaque。, 能够在控制台看到返回的数据, 但是没有权限使用这些数据

• mode:"same-origin"

  • 同源, 不允许跨域

并不能成功跨域进行数据的请求

使用jsonp调取数据

在原生js中，我们可以利用script标签的支持跨域的特性进行

第一种方式---利用script标签的跨域访问特性

第二种方式---动态创建script

第三种方式---使用jquery