vue学习笔记-接口调用fetch用法

最新推荐文章于 2024-06-09 16:54:00 发布
最新推荐文章于 2024-06-09 16:54:00 发布
阅读量1.9k 收藏 3
点赞数 1
分类专栏： # vue基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42349568/article/details/108288692
版权

一，fetch概述

在这里插入图片描述

二，fetch基本用法

在这里插入图片描述
第一个then是fetch的一部分，返回一个promise对象，于是可以继续用then来处理返回的结果ret。
这段代码是服务器的代码：

//这是在创建服务器，通过express，创建名为app的服务器
const express=require('express')
const app=express()
//为获取post参数
const bodyParser=require('body-parser')
//拦截所有的请求，对post请求做出处理，把参数存在req.body中
//extended:false 方法内部使用querysyring模块处理请求参数的格式
app.use(bodyParser.urlencoded({extended:false}))
//静态资源的获取
const path=require('path')
app.use(express.static(path.join(__dirname,'public')))//拼接路径，然后static返回一个函数

//设置允许跨域访问该网址
app.all('*',function(req,res,next){
	res.header("Access-Control-Allow-Origin","*")
	res.header("Access-Control-Allow-Methods",'PUT,GET,POST,DELETE,OPTIONS')
	res.header("Access-Control-Allow-Headers",'X-Requested-With')
	res.header("Access-Control-Allow-Headers",'Content-Type')
	next()
})



app.get('/fdata',(req,res)=>{
	res.send("hello")
})


//post请求参数的获取
app.post('/add',(req,res)=>{
	//接收post请求参数,
	res.send(req.body)
})

//get请求参数的获取
app.get('/index',(req,res)=>{
	res.send(req.query)
})
//路由从上到下匹配，如果都没匹配上，程序运行到这里
//那么就说明没找到页面
app.use((req,res,next)=>{
	res.status(404).send('当前访问的页面是不存在的')
})
//监听端口
app.listen(3000)
console.log('网站服务器启动成功')

这段代码是客户端代码：

 <!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
		    fetch('http://localhost:3000/fdata').then(function(data){
				return data.text()
				//需要注意的是data.text()是fetch的方法，返回的是一个promise对象
			}).then(function(ert){
				console.log(ert)
			})
			//运行这段代码，他就会以get请求向http://localhost:3000/fdata发送请求
			//服务器res.send（）返回的信息存在ert中，客户端爱咋用咋用。
		</script>

	</body>
</html>

三，fetch请求的参数传递get和delete

可以注意到的是，上文中fetch传递的参数有限，比如请求方式？默认以get方式，但若要以post方式呢？
在这里插入图片描述
这里只演示传统的问号传参的方式：

<script type="text/javascript">
		    fetch('http://localhost:3000/fdata?id=123&name=zhangsan',{
				method:'get'
			}).then(function(data){
				return data.text()
				//需要注意的是data.text()是fetch的方法，返回的是一个promise对象
			}).then(function(ert){
				console.log(ert)
			})
			//运行这段代码，他就会以get请求向http://localhost:3000/fdata发送请求
			//服务器res.send（）返回的信息存在ert中，客户端爱咋用咋用。
		</script>

对应的路由：


app.get('/fdata',(req,res)=>{
	res.send(req.query.id+'---'+req.query.name)
})

效果：
在这里插入图片描述
至于delete请求传参，和get类似：

<script type="text/javascript">
		    fetch('http://localhost:3000/fdata/id/123',{
				method:'delete'
			}).then(function(data){
				return data.text()
				//需要注意的是data.text()是fetch的方法，返回的是一个promise对象
			}).then(function(ert){
				console.log(ert)
			})
			//运行这段代码，他就会以get请求向http://localhost:3000/fdata发送请求
			//服务器res.send（）返回的信息存在ert中，客户端爱咋用咋用。
		</script>

app.delete('/fdata/:id',(req,res)=>{
	res.send('restful形式传参'+req.params.id)
})

三，fetch请求的参数传递post

在这里插入图片描述

<script type="text/javascript">
		    fetch('http://localhost:3000/fdata',{
				method:'post',
				body:'id=123&name=zhangsan',
				headers:{
					'Content-Type':'application/x-www-form-urlencoded'
				}
			}).then(function(data){
				return data.text()
				//需要注意的是data.text()是fetch的方法，返回的是一个promise对象
			}).then(function(ert){
				console.log(ert)
			})
			//运行这段代码，他就会以get请求向http://localhost:3000/fdata发送请求
			//服务器res.send（）返回的信息存在ert中，客户端爱咋用咋用。
		</script>

对应的路由：

app.post('/fdata',(req,res)=>{
	res.send(req.body.id+"-----"+req.body.name)
})

另外，还有json格式：
在这里插入图片描述

<script type="text/javascript">
		    fetch('http://localhost:3000/fdata',{
				method:'post',
				body:JSON.stringify({
					id:12,
					name:'zhangsan'
				}),
				headers:{
					'Content-Type':'application/json'
				}
			}).then(function(data){
				return data.text()
				//需要注意的是data.text()是fetch的方法，返回的是一个promise对象
			}).then(function(ert){
				console.log(ert)
			})
			//运行这段代码，他就会以get请求向http://localhost:3000/fdata发送请求
			//服务器res.send（）返回的信息存在ert中，客户端爱咋用咋用。
		</script>

路由无变化，但是需要多加一句代码：

// 处理json格式的post请求
app.use(bodyParser.json())

四，put请求方式的参数传递

一般用于修改数据
在这里插入图片描述

五，fetch的响应结果

在这里插入图片描述
第一种，客户端接收到的就是常见的字符串形式。
第二种，客户端接受的到的就是json对象形式，使用起来很方便：

<script type="text/javascript">
		    fetch('http://localhost:3000/fdata',{
				method:'post',
				body:'name=zhangsan&age=12',
				headers:{
					'Content-Type':'application/x-www-form-urlencoded'
				}
			}).then(function(data){
				// return data.text()
				return data.json()//返回json数据
			}).then(function(ert){
				console.log(ert)
			})
		</script>

对应的路由可以这样写：

app.post('/fdata',(req,res)=>{
	// res.send(req.body)
	//也可以传json对象去服务端
	res.json({
		name:'猪八戒',
		age:'18',
		hobby:'调戏嫦娥'
	})
})

客户端接收到的数据：
在这里插入图片描述
而第一种传过来的字符串：

<script type="text/javascript">
		    fetch('http://localhost:3000/fdata',{
				method:'post',
				body:'name=zhangsan&age=12',
				headers:{
					'Content-Type':'application/x-www-form-urlencoded'
				}
			}).then(function(data){
				return data.text()
				// return data.json()//返回json数据
			}).then(function(ert){
				console.log(ert)
			})
		</script>

在这里插入图片描述
也可以在客户端把字符串转化为json格式：

<script type="text/javascript">
		    fetch('http://localhost:3000/fdata',{
				method:'post',
				body:'name=zhangsan&age=12',
				headers:{
					'Content-Type':'application/x-www-form-urlencoded'
				}
			}).then(function(data){
				return data.text()
				// return data.json()//返回json数据
			}).then(function(ert){
				var obj=JSON.parse(ert)   //把字符串转化为json
				console.log(obj)
			})
		</script>

在这里插入图片描述
也就是说，实际上，.json（）也就比.text（）,多了一步转化为json对象的步骤，实际上是一样的。

笑道三千
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vueUse库Network模块各函数简介及使用方法】
xiejunlan的博客
06-24 1120
vueUseNetwork函数useEventSource 函数使用方法useFetch 函数使用方法useWebSocket 函数使用方法。
前端课程学习笔记汇总
08-10
本"前端课程学习笔记汇总"聚焦于JavaScript的开发学习，涵盖了从基础到进阶的各项知识点，旨在帮助初学者系统地掌握这门语言，并逐步提升至专业水平。 一、JavaScript基础 1. 变量与数据类型：理解var、let和const...
Vue学习笔记（五）--- fetch、axios、async和await
weixin_45092437的博客
10-14 1443
一、fetch 1、概念 ​ Fetch 是新的 ajax 解决方案，是 XMLHttpRequest 的升级版，利用原生 js 发送请求。fecth 的功能与 XMLHttpRequest 基本相同，不同之处有：首先fecth 会返回 Promise 对象，不使用回调函数，使代码更简洁。其次 fecth 采用模块化设计，API分散在多个对象上（Response 对象、Request 对象、Headers 对象）。 2、语法 fetch(url[,{options}]).then().then() ​
vue3(四)-基础入门之 fetch 与 axios
weixin_43520586的博客
11-28 3626
3.Axios 默认返回 JSON 格式的数据，而 Fetch 返回的是 Response 对象，需要自己通过 Response 的方法（如 json()、text() 等）将结果转换成所需的格式。4.Axios 对于请求错误可以直接抛出异常，方便进行错误处理，而 Fetch 的错误处理比较繁琐，需要手动检查 Response.ok 属性。2.Axios 可以拦截请求和响应，可以全局配置默认的请求头、超时时间等，而 Fetch 目前不支持这些功能。// 2.axios post请求。// post 请求。
Vue学习（三十五）——fetch的用法
云中、漫步的博客
10-14 1万+
文章目录一、fetch API 中的 HTTP 请求二、fetchAPI 中 响应格式 Fetch API是新的ajax解决方案 Fetch会返回Promise fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。- fetch(url, options).then(） <script type="text/javascript"> // Fetch API 基本用法 fetch(url).then() 第一个参数请求的路径 // Fe
如何在Vue3中使用fetch实现数据请求？
最新发布
有我更精彩的博客
06-09 2009
fetchVue3是Vue.js的最新版本，它引入了许多新的特性和优化，其中包括组合式API（Composition API），更快的渲染器，以及更小的打包体积。使用Vue3的组合式API，可以更灵活地组织和复用代码，从而提高开发效率。通过本文的讲解，相信你已经学会了如何在Vue3中使用fetch进行数据请求。在实际项目中，合理使用fetch可以大大简化数据请求和处理的流程，提高开发效率。同时，与Vue3的组合式API相结合，可以让代码更加模块化和易于维护。
Vue接口调用（一）fetch用法
m0_55990909的博客
04-04 8645
✍目录总览： 1. fetch概述 基本特性 fetch是传统ajax的升级版本，是原生js 更加简单的数据获取方式，功能更强大，更灵活，可以看作是xhr的升级版。 基于Promise实现 语法结构 fetch(url).thne(fn2) .thne(fn3) ... .then(fn) 2. fetch的基本用法 第一个.then接收到的是Promise数据集 需要被.then处理才可以看到 我们最终想要的数据。 //客户端请求 <body> <sc
vue3项目实战中的接口调用方法（二）fetch用法 （前后端交互） get请求/post请求/put请求/delete请求
热门推荐
XSL_HR的博客
10-21 1万+
本期文章将重点介绍vue3的fetch方法实现请求接口
ajax-day01.rar_达内开发学习笔记
09-20
在“ajax-day01.rar_达内开发学习笔记”这个压缩包中，包含了第一天学习Ajax的基础内容，旨在帮助初学者理解并掌握Ajax的核心概念和使用方法。** **一、Ajax简介** Ajax并不是一种单一的技术，而是一组技术的组合，...
vue+spring boot整合笔记和代码资料
06-21
Vue的学习笔记会涵盖基础到进阶的知识，如组件化、响应式数据绑定、路由、Vuex状态管理等。而Spring Boot的学习资料则可能包含Spring MVC、JPA、Thymeleaf等关键特性的介绍，以及如何配置和启动微服务。 整合Vue.js...
My-Note:这是洪学习笔记
03-17
【JavaScript学习笔记】 在编程领域，JavaScript是一种广泛使用的脚本语言，主要应用于Web开发，用于增加网页的交互性。这份“洪学习笔记”显然聚焦于深入理解和应用JavaScript的关键概念和技术。JavaScript不仅...
vue fetch 网络请求
10-21
vue 开发时的使用 fetch 封装实现网络请求，利用回调函数来带回访问数据，实现控制于请求分离，降低解藕性。
JavaScript 学习笔记集和代码库
02-21
这个“JavaScript学习笔记集和代码库”涵盖了该语言的基础知识、进阶技巧以及实用示例，对于想要深入理解和掌握JavaScript的初学者或有经验的开发者来说，都是一个宝贵的资源。 首先，让我们来讨论JavaScript的基础...
019: vue中使用fetch读取本地txt文件
大剑师兰特的GIS世界
06-19 3057
第019个在做卫星项目的时候，会将两行根数放在txt文件中，放在public的文件夹中， 如何读取呢？
QA快速掌握：VUE Fetch API提效工具实践
Tallbo的博客
05-30 652
提供了一种简单的方式来监听用户在表单元素中进行的变化，适用于需要在用户完成输入或选择后触发操作的场景。需要注意的是，如果你需要实时监听用户输入的过程，可以考虑使用。1.用券场景多，建券频繁，用到优惠券的场景：下单、到店礼、预约报名、满返满赠、抽奖。是一种简便的 Vue.js 事件绑定写法，用于处理用户点击特定元素的情况。对于选择框，同样地，当用户选择不同的选项并且选择框失去焦点时，会触发。// 处理环境切换，您可以在这里执行相关操作，如修改后端API的地址。较为繁琐的API，需要多行代码来完成简单的请求。
VUE fetch的基本用法
weixin_45277714的博客
08-14 1498
tenx() 方法属于fetchAPI的一部分 它返回一个Promise实例对象 用于获取后台返回的数据 可调用后面的then方法 // fetch的基本用法 fetch('http://localhost:2021/fetch').then((data) => { return data.text(); // 这里的then里面的data不能直接输出 需要return data.text() // data.text() 是一个 Promis
【how2j Vue部分】两种在Vue的Ajax框架——fetch & axios
diguangxihua的博客
05-03 1059
发送请求显示数据处理错误。
Vue 中的 Fetch 使用
在下魔王ii的博客
07-16 1110
废话不多说 ，直接上代码 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue component</title> <script src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script&g
第十九篇 fetch请求
灵魂学者的博客
10-26 2514
本篇就开始讲到关于请求的内容了，当然关于 Vue 的大部分还是会想到axios，因为这是官方推荐用的，了解 Vue 的知道在axios之前还有一个vue-resource，后来也由于作者尤雨溪声明vue-resource 已经不维护了，推荐使用这个axios，那么在此之前先来讲在这个fetch，为什么呢？因为它正是W3C的正式标准，即在任何页面当中不需要引入任何库，就可以直接来使用的；原生的XHR(XMLHttpRequest)是一个设计简陋的API，配置调用方式较为混乱，基于事件的异步不友好，且兼容性不好
"前端Bootstrap Es6 vue学习笔记-基础环境配置和样式排版
通过路由来实现单页面应用的页面切换------------前端Bootstrap Es6 vue学习笔记，内容围绕着前端开发的三大核心技术：Bootstrap、Es6和Vue.js展开。 首先，介绍了Bootstrap框架的基础环境配置。通过开发者工具的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值