javascript-前后端交互-fetch

最新推荐文章于 2023-04-12 21:25:16 发布

gaog2zh

最新推荐文章于 2023-04-12 21:25:16 发布

阅读量409

点赞数

分类专栏： # javascirpt 文章标签： fetch 前后端交互 javascript

本文链接：https://blog.csdn.net/gaogzhen/article/details/107624526

版权

javascirpt 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

javascript-前后端交互-fetch

文章目录

1、基本用法
2、fetch请求参数
3、fetch响应结果
- 3.1、响应数据的格式
- ***后记*** ：

内容

1、基本用法

格式

  fetch(url)
  	.then(data => {
  		return data.text()
  	}.then(ret => {
  		// 这里得到的才是最终的数据
  		console.log(ret)
  	}

解析
- text()方法属于fetch API 的一部分，它返回一个Promise实例对象，用于获取后台返回的数据

后端接口同上一篇博文，示例代码1-1：

  // 省略其他默认生成的页面代码，这里只给出js代码
  fetch('http://localhost:3000/data')
  	.then(data => {
  		return data.text()
  	}).then(ret => {
  		console.log(ret)
  	})
  	
  // 结果
  Hello World!

2、fetch请求参数

2.1、常用配置选项

method(String)：HTTP请求方法，默认为GET，其他POST,PUT，DELETE
body(String | Object):HTTP的请求参数
header(Object): HTTP的请求头，默认{}

2.2、GET、DELETE请求方式的参数传递与后台接收

DELETE请求方式的参数传递和后台接收与GET相同，只是配置method的值该为’delete‘即可，这里我们以GET示例。

传统URL

  fetch(url?query, {
  	method: 'get'
  })
  	.then(data => {
  		return data.text();
  	}).then(ret => {
  		console.log(ret)
  	})

传统URL的后台获取参数

  app.get(path, (request, response) => {
  	...
  	request.query.参数名 // 获取参数
  	...
  })

示例代码2.2-1：

  // 前端页面
  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>fetch</title>
  </head>
  <body>
  	<script>
  		let url = 'http://localhost:3000/books'
  		fetch(url + '?id=123', {
  			method: 'get'
  		})
  			.then(data => {
  				return data.text()
  			}).then(ret => {
  				console.log(ret);
  			})
  	</script>
  </body>
  </html>
  
  // 后台路由，其他部分同上一篇博文
  app.get('/books', (req, res) => {
    res.send('获取的传统URL参数：' + req.query.id)
  })
  
   // 结果：
   获取的传统URL参数：123

Restful风格

  fetch(url/query, {
  	method: 'get'
  })
  	.then(data => {
  		return data.text();
  	}).then(ret => {
  		console.log(ret)
  	})

+Restful风格后台获取参数

	app.get(path, (request, response) => {
		...
		request.params.参数名 // 获取参数
		...
	})

示例代码2.2-2：

 // 自动生成的其他html代码省略，只给出js代码

 fetch(url + '/123', {
 				method: 'get'
 			}).then(data => {
 					return data.text()
 				}).then(ret => {
 					console.log(ret);
 				})
 
 // 后台路由
 app.get('/books/:id', (req, res) => {
   res.send('获取的Restful风格参数：' + req.params.id)
 })
 
 // 结果：
  获取的Restful风格参数：123

2.3、POST、PUT请求方式的参数传递与后台接收

PUT请求方式参数传递与后台接收与POST相同，需要吧post换为put即可，这里以POST为例;其他PUT一般为修改携带ID信息，后台接收下ID即可同上。

POST参数（表单）传递

  fetch(url, {
  			method: 'post',
  			body: '属性名1=属性值1&属性名2=属性值2&...',
  			headers: {
  				'Content-Type': 'application/x-www-form-urlencoded'
  			}
  		}).then(data => {
  				return data.text()
  			}).then(ret => {
  				console.log(ret);
  			})

POST参数(JSON)传递

  fetch(url, {
  			method: 'post',
  			body: JSON.stringify({
  				属性名1: 属性值1, 
  				属性名2: 属性值2,
  				...
  			}),
  			headers: {
  				'Content-Type': 'application/json'
  			}
  		}).then(data => {
  				return data.text() 
  			}).then(ret => {
  				console.log(ret);
  			})

POST参数(JSON)传递/ POST参数（表单）传递，后台接收，后台接收

3、fetch响应结果

3.1、响应数据的格式

text()：将返回体处理成字符串类型
json()：返回结果和JSON.parse(response)一样

示例3.1-1：

  // 前端页面代码
  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>fetch</title>
  </head>
  <body>
  	<script>
  		let url = 'http://localhost:3000/user'
  		fetch(url, {
  			method: 'post',
  			body: 'user=zhangsan&pwd=123',
  			headers: {
  				'Content-Type': 'application/x-www-form-urlencoded'
  			}
  		}).then(data => {
  				return data.json()
  			}).then(ret => {
  				console.log(ret);
  			})

  	</script>
  </body>
  </html>

  // 后台路由
  app.post('/user', (req, res) => {
    res.send(req.body)
  })

  // 结果
  {user: "zhangsan", pwd: "123"}

后记：

本项目为参考某马视频全栈开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA

gaog2zh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript-前后端交互-fetch

javascript-前后端交互-fetch目录文章目录1、基本用法2、fetch请求参数2.1、常用配置选项2.2、GET、DELETE请求方式的参数传递与后台接收2.3、POST、PUT请求方式的参数传递与后台接收3、fetch响应结果3.1、响应数据的格式***后记*** ：内容1、基本用法格式 fetch(url) .then(data => { return data.text() }.then(ret => { // 这里得到的
复制链接

扫一扫