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

article/2025/7/9 16:34:00

一，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)   //把字符串转化为jsonconsole.log(obj)})</script>

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


http://chatgpt.dhexx.cn/article/cjtK4xDt.shtml

相关文章

Vue接口调用（一）fetch用法

Vue接口调用（一）fetch用法

Vue接口调用&#x1f525; 接口调用地址Vue接口调用&#xff08;一&#xff09;fetch用法https://blog.csdn.net/m0_55990909/article/details/123957200Vue接口调用&#xff08;二&#xff09;axios用法&#x1f525;https://blog.csdn.net/m0_55990909/article/details/1239…
阅读更多...
Fetch使用方法

Fetch使用方法

前言&#xff1a; fetch是用来取代传统的XMLHttpRequest的。 它的优点很多&#xff0c;包括链式调用的语法、返回promise等。 什么是fetch? fetch api是基于promise的设计&#xff0c;它是为了取代传统xhr的不合理的写法而生的。 WHY fetch&#xff1f; xhr请求写起来非常的混…
阅读更多...
彻底关闭烦人的---FF新推荐

彻底关闭烦人的---FF新推荐

1、进入控制面板——>管理工具——>服务 找到Flash Helper Service服务 2、进入控制面板——>管理工具——>任务计划程序 找到FlashHelper TaskMachineCore的任务&#xff0c;将其删除
阅读更多...
如何关闭flashhelper的ff新推荐广告弹窗

如何关闭flashhelper的ff新推荐广告弹窗

描述&#xff1a;如何关闭flashhelper的ff新推荐广告弹窗 步骤&#xff1a; 方法一&#xff0c;直接C盘搜索flashhelper文件&#xff0c;删除即可方法二&#xff0c;在计算机管理服务里面&#xff0c;找到flashhelper禁用
阅读更多...
ff新推荐的关闭办法

ff新推荐的关闭办法

这个是flash的广告 如果直接删除Adobe Flash Helper会导致flash的不正常使用 建议是winR在输入框中输入service&#xff0c;在service里找到 然后停用再禁用掉就可以了
阅读更多...
“FF新推荐”猥琐的弹窗如何关闭？

“FF新推荐”猥琐的弹窗如何关闭？

自己的电脑中时常会弹出一个叫“FF新推荐”的广告弹窗&#xff0c;扰民不说显示的内容也很猥亵。 特别是在演示文档&#xff0c;开会时就特别尴尬。 1. FF新推荐是个什么鬼&#xff1f;只要你安装了Flash控件会自动更新弹窗这个莫名其妙&#xff0c;十分尴尬的弹窗&#xff0…
阅读更多...
禁用FF新鲜事广告

禁用FF新鲜事广告

不知道啥时候起&#xff0c;电脑开机之后总会弹出莫名其妙的FF新鲜事广告&#xff0c;如图 定睛一看&#xff0c;Flash助手推荐&#xff0c;原来Flash才是罪魁祸首。这不能忍。打开任务管理器&#xff0c;不停按f&#xff0c;可以找到一个叫Flash Helper Service的进程&#xf…
阅读更多...
FF新推荐弹窗怎么彻底让他爬

FF新推荐弹窗怎么彻底让他爬

背景&#xff1a;不知道怎么就捆绑安装了这个流氓软件&#xff0c;还找不到位置&#xff0c;不知道在哪删&#xff1f;今天突然灵机一动试了一下这个方法&#xff0c;然后可行 第一步&#xff1a;守株待兔——等他不经意的弹出 第二步&#xff1a;欲擒故纵——点击右上角菜单创…
阅读更多...
git merge之--no-ff 的作用

git merge之--no-ff 的作用

禁止使用快进模式 no-fast—forward $ git merge --no-ff -m "merge with no-ff" dev在许多介绍 Git 工作流的文章里&#xff0c;都会推荐在合并分支时&#xff0c;加上 --no-ff 参数&#xff1a; $ git checkout develop $ git merge --no-ff feature–no-ff 在这的…
阅读更多...
如何卸载FF推荐?

如何卸载FF推荐?

很多小伙伴们都发现&#xff0c;近一段时间&#xff0c;自己的电脑中时常会弹出一个叫“FF新推荐”的广告弹窗&#xff0c;扰民不说显示的内容也很猥亵。按理说&#xff0c;电脑上开启拦截软件后&#xff0c;一般的广告弹窗是不会出现的&#xff0c;那么这个能跳过安全工具拦截…
阅读更多...
git merge 合并时 --no-ff 的作用——主要影响版本回退（好文章！）

git merge 合并时 --no-ff 的作用——主要影响版本回退（好文章！）

在许多介绍 Git 工作流的文章里&#xff0c;都会推荐在合并分支时&#xff0c;加上 --no-ff 参数&#xff1a; $ git checkout develop$ git merge --no-ff feature --no-ff 在这的作用是禁止快进式合并。我们平常什么都不加的时候&#xff0c;则使用默认的 --ff &#xff0c…
阅读更多...
win10如何禁用\删除讨厌的ff新鲜事（ff新推荐）（flash弹窗广告）

win10如何禁用\删除讨厌的ff新鲜事（ff新推荐）（flash弹窗广告）

雾草&#xff0c;Adobe Flash植入的这种广告太变态了&#xff01; 定位&#xff1a; 打开运行窗口&#xff08;winr&#xff09;&#xff0c;输入“services.msc”&#xff0c;之后回车确定 然后我们在弹出来的窗口中找到“flash helper service”选项&#xff0c;之后右键…
阅读更多...
#FF00FF(255,0,255)应该是紫色(Purple),把#FF00FF称为“品红”(“洋红/Magenta”)是一种误称

#FF00FF(255,0,255)应该是紫色(Purple),把#FF00FF称为“品红”(“洋红/Magenta”)是一种误称

作者&#xff1a;❄️固态二氧化碳❄️ (主页) 链接&#xff1a;#FF00FF(255,0,255)应该是紫色(Purple),把#FF00FF称为"品红"(“洋红/Magenta”)是一种误称 - 固态二氧化碳的博客 - CSDN博客 来源&#xff1a;CSDN博客 发表时间&#xff1a;2019年06月02日 18:31:06 …
阅读更多...
音乐推荐系统

音乐推荐系统

✨写在前面&#xff1a;强烈推荐给大家一个优秀的人工智能学习网站&#xff0c;内容包括人工智能基础、机器学习、深度学习神经网络等&#xff0c;详细介绍各部分概念及实战教程&#xff0c;通俗易懂&#xff0c;非常适合人工智能领域初学者及研究者学习。➡️点击跳转到网站。…
阅读更多...
推荐系统算法--ItemCF--MF(ALS)--FF

推荐系统算法--ItemCF--MF(ALS)--FF

1.ItemCF&#xff1a; 协同过滤是什么&#xff1f; 协同过滤 (Collaborative filtering)&#xff0c;指的是&#xff0c;通过收集群体用户的偏好信息&#xff0c;自动化预测&#xff08;过滤&#xff09;个体用户可能感兴趣的内容。协同&#xff08;collaborating&#xff09…
阅读更多...
Git merge时使用--no-ff参数

Git merge时使用--no-ff参数

/1、Git&#xff1a;Git-merge的–ff和–no-ff。 前言 Git merge最容易糊涂的地方就是这个--ff参数和--no-ff 参数&#xff0c;通过本文&#xff0c;把这个整理清楚。 其实官网讲的非常清楚&#xff0c;不过可能因为是英文的&#xff0c;所以大家阅读起来会有一些障碍。&…
阅读更多...
如何清除弹窗FF新推荐

如何清除弹窗FF新推荐

前言&#xff1a;一个星期日的下午&#xff0c;我打算过肥宅的生活&#xff0c;吃的东西已经就位&#xff0c;当我打开电脑后跳出了这个玩意&#xff0c;瞬间好心情全无。身为程序员&#xff0c;感觉受到了侮辱。 一 Adobe Flash简介 查看任务管理器查看详细信息如下&#xf…
阅读更多...
ff新推荐弹窗怎么彻底删除---解决方案

ff新推荐弹窗怎么彻底删除---解决方案

根源&#xff1a;几乎所有的电脑中都会安装Flash Player&#xff0c;而FF新推荐弹窗就是Flash Player的&#xff0c;那么Win7、Win10系统FF新推荐怎么卸载&#xff1f; 方法一&#xff1a;直接删除FF新推荐 1、如果FF新推荐弹出之后&#xff0c;先不要关闭掉&#xff0c;使用键…
阅读更多...
彻底关闭弹出广告“FF新推荐”

彻底关闭弹出广告“FF新推荐”

很多小伙伴们都发现&#xff0c;近一段时间&#xff0c;自己的电脑中时常会弹出一个叫“FF新推荐”的广告弹窗&#xff0c;扰民不说显示的内容也很猥亵。一检查发现居然是Flash中国官方干的&#xff0c;安装了flash播放器后就弹出广告。就像下面这样的&#xff1a; 1. FF新推荐…
阅读更多...
Java课程设计

Java课程设计

学生考勤管理系统 文章目录 学生考勤管理系统一、 前言1、设计背景2、系统设计的目的及意义3、 调查用户需求 二、 系统简介三、 功能介绍1、服务器启动2、登陆3、学生端4、 老师端 四、 系统调试实现1、老师端2、学生端 五、 总结 一、 前言 1、设计背景 随着社会的发展&…
阅读更多...
推荐文章

Copyright @ 2022~2023