React学习-fetch和fetch-jsonp

React学习-fetch和fetch-jsonp

• fetch不需要引入直接调用就好，和ajax，axios类似
• fetch不支持跨域

接下来写一个简单的测试

  qryUser(){
      fetch('http://localhost:8080/getAllUser').then((res)=>{
          return res.json();
      })
    .then((res)=>{
      console.log(res);
    })
  }
<button onClick={this.qryUser.bind(this)}>点我</button>

按钮去触发这个事件，去发起请求，这里用springboot模拟一个本地的后端接口

UserController.java

@CrossOrigin(origins = "*")
@RestController
public class UserController {

    @Autowired
    private UserService userService;
    
    @GetMapping("/getAllUser")
    List<User> findAllUser(){
        return userService.findAll();
    }
}

PS: 用@CrossOrigin注解暂时先允许所有跨域请求

• 点击一次按钮可以看到
  
  

在network看到请求已经成功了，并且控制台已经打印出后台相应的报文了

proxy代理配置

• 和vue类似，找到webpackDevServer.config.js文件
• 如果没有这个文件就用下面这个命令去生成出config文件夹

npm run eject

proxy

    proxy:{
      "/api":{
        target:"http://localhost:8080",
        changeOrigin:true,
        pathRewrite:{
          "^/api":""
        }
      }
    },

意思就是以后遇到/api的都用http://localhost:8080替换掉，因此，我们改造下前端请求的接口

  qryUser(){
      fetch('/api/getAllUser').then((res)=>{
          return res.json();
      })
    .then((res)=>{
      console.log(res);
    })
  }

再点击一次

• 可以看到地址已经迁到了前端的代理地址了，这个和刚才直接请求后端的效果是一样的

fetch-jsonp

• 用npm安装一下jsonp

npm i fetch-jsonp

• 导入fetch-jsonp

import fetchJsonp from 'fetch-jsonp'

可以借用百度的后端接口

https://www.baidu.com/sugrec?

写法如下和fetch基本一致

  qryUser(){
    fetchJsonp(`url`,{
      jsonCallback:'cb'
    }).then((res)=>{
          return res.json();
      })
    .then((res)=>{
      console.log(res);
    })
  }