Fetch
Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如 Service Workers。Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。
get请求 delete
基于springboot的fetch get没有方法体不能上传下载图片
get1按钮是普通get请求不带参数
get2按钮是带参数的请求 且含有请求头
get3按钮是把带的参数封装json
delet按钮 删除与get相似
<div class="container"><button class="btn fget1 btn-primary btn-sm">fetch - get1</button><button class="btn fget2 btn-info btn-sm">fetch - get2</button><button class="btn fget3 btn-info btn-sm">fetch - get3</button><button class="btn fdelete btn-success btn-sm" onclick="del(999)">fetch - delete</button> </div> <script>let fget1 = document.querySelector('.fget1')fget1.onclick = function () { //http://localhost:8080/get1 res.text()文本字符串 res.json()对象fetch('/get1').then(res => res.text()).then(data => {console.log(data)}).catch(err => {console.log('请求错误')})}//fetch get 向后端接口传值，后端接口接值，并处理值直接输出让前端接收//?a=10&b=20 {code:200,result:30}let fget2 = document.querySelector('.fget2')fget2.onclick = async () => {const res = await fetch('/get2?a=10&b=20&user=李四', {method: 'GET',headers: {tk: '123111111111111111111111111'}})const data = await res.json()console.log(data)console.log(data.code)console.log(data.result)}//fetch deletelet fdelete = document.querySelector('.fdelete')const del = async (id) => {const res = await fetch(`/delete?id=${id}`, {method: 'DELETE'})const data = await res.json()console.log(data)console.log(data.code)console.log(data.id)console.log(data.msg)}let fget3 = document.querySelector('.fget3')fget3.onclick = async () => {const res = await fetch('/get3?id=10&name=李四', {method: 'GET',headers: {'Content-Type': 'application/json',tk: '123111111111111111111111111'}})const data = await res.json()console.log(data)}</script>a
@RestController @CrossOrigin public class fetch01 {@GetMapping("/get1")@CrossOriginpublic Map<String, Object> get1( ) {Map<String, Object> map = new HashMap<>();map.put("code", 200);map.put("msg", "信息获取完成");return map;}@GetMapping("/get2")@CrossOriginpublic Map<String, Object> get2(@RequestParam(required = true,name = "id",defaultValue = "1000") int id ,String name,@RequestHeader("tk") String token) {Map<String, Object> map = new HashMap<>();map.put("code", 200);map.put("msg", "信息获取完成");map.put("tk", token);return map;}let fget3 = document.querySelector('.fget3')fget3.onclick = async () => {const res = await fetch('/get3?id=10&name=李四', {method: 'GET',headers: {'Content-Type': 'application/json',tk: '123111111111111111111111111'}})const data = await res.json()console.log(data)}@DeleteMapping("/delete")@CrossOriginpublic Map<String, Object> delete(int id ) {Map<String, Object> map = new HashMap<>();map.put("code", 200);map.put("id", id);map.put("msg", "删除成功");return map;}}
Post请求
主要区别'Content-Type': 'application/x-www-form-urlencoded'
'Content-Type': 'application/json'
传入参数的时候需要加个注解
参数传输的格式
三种常见Content-Type格式，最后一种你肯定用过_content-type: application/json_前端呆头鹅的博客-CSDN博客
<body> <div class="container"><button class="btn fget1 btn-primary btn-sm">fetch - post1</button><button class="btn fget2 btn-info btn-sm">fetch - post2</button> </div> <script>let get = document.querySelector('.fget1')get.onclick = async function () {const resp = await fetch('/post', {method: 'post', /*和post一样*//* body: "id=999&name=张三丰", //User user*/body: JSON.stringify({id: 999, name: '缍三'}),headers: {/* 'Content-Type': 'application/x-www-form-urlencoded', //User user*/'Content-Type': 'application/json',// @RequestBody User usertk: '123111111111111111111111111put'}})const data = await resp.json();console.log(data)}let get1 = document.querySelector('.fget2')get1.onclick = async function () {const resp = await fetch('/post1', {method: 'post', /*和post一样*/body: "id=999&name=张三丰", //User userheaders: {'Content-Type': 'application/x-www-form-urlencoded', //User usertk: '123111111111111111111111111put'}})const data = await resp.json();console.log(data)}</script> </body>后端
@RestController @CrossOrigin public class fetchpost {@PostMapping("/post")@CrossOriginpublic Map<String, Object> post(@RequestBody User user, @RequestHeader("tk") String token) {Map<String, Object> map = new HashMap<>();map.put("code", 200);map.put("msg", "信息获取完成");map.put("user", user);map.put("token", token);return map;}@PostMapping("/post1")@CrossOriginpublic Map<String, Object> post1( User user, @RequestHeader("tk") String token) {Map<String, Object> map = new HashMap<>();map.put("code", 200);map.put("msg", "信息获取完成");map.put("user", user);map.put("token", token);return map;}}
Axios-get post
get方式
<button class="get1">get1</button><script>/*axios.defaults.baseURL = 'http://localhost';*/ //跨域的时候加上axios.defaults.headers.common['token'] = '321321321';axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //User userlet get1 = document.querySelector('.get1')get1.onclick = async function () {const data = await axios({url: '/get10',method: 'GET',params: {id: 10, name: '李四6'},headers: {'content-type': 'application/x-www-form-urlencoded', //@RequestBody User user*/}})console.log(data.data)} </script>后端
@RestController @CrossOrigin public class axion { @GetMapping("/get10")@CrossOriginpublic Map<String, Object> get2(User user, int id, String name, @RequestHeader String token) {Map<String, Object> map = new HashMap<>();map.put("code", 200);map.put("msg", "信息获取完成");map.put("user", user);map.put("id", id);map.put("name", name);map.put("token", token);return map;} }
POST方式
<script>/*axios.defaults.baseURL = 'http://localhost';*/ //跨域的时候加上axios.defaults.headers.common['token'] = '321321321';axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //User userlet post = document.querySelector('.post')post.onclick = async function () {/* const data = await axios.get('/get200', {params: {id:999, name: 'jack'}})*/const data = await axios({url: '/post100',method: 'POST',/* body:{'name':'李四'},*/data: {name: '李强', id: 33333},headers: {'content-type': 'application/json', //@RequestBody User user}})console.log(data.data)} </script>后端
@PostMapping("/post100")@CrossOriginpublic Map<String, Object> post100(@RequestBody User user, @RequestHeader String token) {Map<String, Object> map = new HashMap<>();map.put("code", 200);map.put("msg", "信息获取完成");map.put("user", user);map.put("token", token);return map;}
)
: IoC容器)
