React进行服务器端数据请求---fetch

╰+哭是因爲堅強的太久メ 2021-09-15 15:30 396阅读 0赞

get请求

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

  1. <!DOCTYPE html>
  5. Hello World

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

  1. <!DOCTYPE html>
  5. Hello World

数据库

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

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

在线接口

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

  1. <!DOCTYPE html>
  5. Hello World

post数据请求

  1. <!DOCTYPE html>
  5. Hello World

核心代码，需注意

  1. var url = ‘http://127.0.0.1:8899/api/insertData‘
  2. var options = {
  3. method: ‘POST’,
  4. headers: {
  5. ‘Content-Type’: ‘application/x-www-form-urlencoded’,
  6. },
  7. body: ‘name=1&sex=2&email=3&phone=4&address=5’
  8. }
  9. fetch(url,options)
  10. .then((res)=>{
  11. return res.json()
  12. })
  13. .then((res)=>{
  14. console.log(res)
  15. })

第二种方式

  1. componentDidMount(){
  2. var data = {
  3. name:”1”,
  4. sex:”2”,
  5. email:”3”,
  6. phone:”4”,
  7. address:”5”
  8. }
  9. fetch(‘http://127.0.0.1:8899/api/insertData',\{
  10. method: ‘POST’,
  11. body: `data=${JSON.stringify(data)}`,
  12. headers: {
  13. ‘Content-Type’: ‘application/x-www-form-urlencoded’,
  14. }
  15. })
  16. .then((res)=>{
  17. console.log(res.json())
  18. })
  19. }

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”

    • 同源, 不允许跨域

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

  1. <!DOCTYPE html>
  5. Hello World

使用jsonp调取数据

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

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

  1. <!DOCTYPE html>
  5. JSONP实现跨域2

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

  1. <!DOCTYPE html>
  5. JSONP实现跨域2

第三种方式—-使用jquery

  1. <!DOCTYPE html>

发表评论

表情：
评论列表 （有 0 条评论，396人围观）

还没有评论，来说两句吧...

相关阅读