JS_fetch请求数据

news2024/9/30 7:21:57

1、axios

比如常用的需求中,想要请求A接口的数据再去请求B接口的数据,axios的做法是需要先请求A接口,然后在A接口的成功的回调函数里面去请求B接口。
fetch使用的情况并不多,主要是由于存在兼容性问题,在企业中就不会作为首选的目标去开发。

fetch的出现主要是解决xhr(XmlHttpRequest)的,并不是去作为替代axios而存在。
在这里插入图片描述

2、fetch的兼容性解决方法

polyfill第三方库

fetch对于安卓5又或是IE8以上不支持,github上的第三方库polyfill对于这一类问题进行了完善,polyfill是怎么去实现填补这个空缺的呢?它其实只是在fetch请求不支持的时候又重新回过头使用的XHR去操作,在支持使用fetch的浏览器上就使用fetch去请求。

3、fetch的使用

先在本地创建一个json文件,然后通过fetch请求json文件中的数据,模拟调取接口中的json数据。
json数据:

{
    "status": 0,
    "data":
    {
        "films": [
        {
            "name": "小陈同学",
            "age": 23,
            "addr":"长沙市"
        },{
            "name": "张三",
            "age": 18,
            "addr":"湘潭市"
        },{
            "name": "李四",
            "age": 20,
            "addr":"广州市"
        },{
            "name": "王五",
            "age": 50,
            "addr":"北京市"
        }],
        "total": 4
    },
    "msg": "ok"
}

模拟请求:

在使用fetch调取数据时,第一个回调函数并非像axios一样直接请求了数据的,而是需要先对数据进行一步处理,然后处理成功后才再通过回调函数返回出去。

第一个回调函数中除了res.json()外,还有res.text(),text()的话是直接返回了文本出去了,而json()是将res转为json对象再返回出去的。

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

在这里插入图片描述

4、fetch的get请求

json对象的数据格式

fetch('apiUrl').then(res => {
  return res.json()
}).then(data => {
   console.log(data);
})

text文本的数据格式

fetch('apiUrl').then(res => {
  return res.text()
}).then(data => {
   console.log(data);
})

5、fetch的post请求

urlencoded编码格式:

urlencoded 格式,又叫 form 格式、x-www-form-urlencoded格式,它是一种表单格式。
主要是通过键值对的形式组成,键和值之间用 = :name=xiaochen,多个键值对之间用 & :name=xiaochen&age=23

fetch("json/test.json", {
	method: "post",
	headers: {
		"Content‐Type": "application/x‐www‐form‐urlencoded"
	},
	credentials: 'include',
	body: "name=xiaochen&age=23"
}).then(res => res.json()).then(res => {
	console.log(res);
})

application/json编码格式:

body中需要使用JSON.stringify将对象转为字符串的格式传入

fetch("json/test.json", {
	method: "post",
	headers: {
		"Content‐Type": "application/json"
	},
	body: JSON.stringify({
		name: "xiaochen",
		age: 23
	})
}).then(res => res.json()).then(res => {
	console.log(res);
})

.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/128664.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

南大通用数据库-Gbase-8a-学习-29-常用函数介绍

一、测试环境 名称值cpu12th Gen Intel Core™ i7-12700H操作系统CentOS Linux release 7.9.2009 (Core)内存3G逻辑核数2Gbase-8a数据库版本9.5.3.27 二、函数介绍 1、HEX (1)说明 将数字或字符串转换成十六进制形式。 (2)例…

2022年我去过最喜欢的16座城市

欢迎关注「苏南下」分享我的旅行、摄影心得感悟2022 年我去了 16 个城市地区,拍了 40条旅行短片。又是很久没更新,2022 年过得好快,马上就是 2023 了。如果用一个关键词来总结我这一年,我觉得可以是:运气好。从年初 1 …

P1328 [NOIP2014 提高组] 生活大爆炸版石头剪刀布

题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头。如果两个人出拳一样,则不分胜负。在《生活大爆炸》第二季第 8 集中出现了一种石头剪刀布的升级版游戏。 升级版游戏在传统的石头剪刀布游戏的基础上,增加了两个新手势: 斯波克:《星际迷航》主角…

捷报频传 | Bonree ONE获2022科技赋能金融业场景金融建设突出贡献奖

近日,由《金融电子化》杂志社主办的“2022第十三届金融科技应用创新奖”评选结果正式揭晓。本次评奖围绕项目先进性、项目创新点、项目对推动数字化转型及提升服务能力的作用、社会及经济效益等维度展开。博睿数据一体化智能可观测平台Bonree ONE再次脱颖而出&#…

【 Tomcat服务器】

文章目录二、Web服务器2.1 概念2.1.1 什么是Web2.1.2 什么是Web服务器2.2 常见Web服务器2.3 Tomcat服务器2.3.1 Tomcat的下载2.3.2 Tomcat的安装2.3.3 Tomcat的目录结构2.3.4 Tomcat的启动2.3.5 Tomcat的停止运行所需jar包2.3.5 Tomcat的停止2.3.6 修改Tomcat端口号2.3.7 项目部…

有关文件IO操作的错误(error)提示

在编程中,我们一般都是要讲究一定的使用规范的。按照一定的规范编写代码,返回运行提示,在代码运行出现问题时能方便我们能快速的定位到问题的所在。 特别是在使用库函数或者系统调用的API的时候,我们最好也要关注函数的返回值所能…

INTENT2022--一道包含12个反调试反虚拟机操作的ctf题解

作者:selph 从一道Re题学习12种反调试反虚拟技术 题目:AntiDebuggingEmporium 来源:INTENT CTF 2022 Re 这个题目很有意思,里面出现了总共12个反调试反虚拟机的操作,本文内容分两部分,前部分是题解&…

六西格玛奠基人之张驰染阳杂记

中招第1天: 上周四从外地出差回来,落地就觉得有点全身乏力,晚上开始发冷,预感可能中招了。大数据预测深圳第一波疫情高峰发生在12月20日,陆续接到深圳同事亲友中招的消息,感慨真是神预测。 因为头晕目眩&…

LeetCode419.甲板上的战舰

LeetCode刷题记录 文章目录📜题目描述💡解题思路⌨C代码📜题目描述 给你一个大小为 m x n 的矩阵 board 表示甲板,其中,每个单元格可以是一艘战舰 X 或者是一个空位 . ,返回在甲板board上放置的 战舰 的数量…

Elasticsearch 日志能否把全部请求打印出来?

1、实战问题请问一下球主,es怎么配置可以把请求日志都打印出来。就是不管是调用借口,还是kibana查询数据,es能打印dsl的请求日志吗??求指导。怎么配置?——问题来源:https://t.zsxq.com/09vv8rq…

现代细胞计数分析平台丨OMIQ简介

单细胞分析,变得简单 OMIQ是一个现代细胞计数分析平台,它将机器学习和分析管道与经典手动分析的世界连接起来。它允许研究人员在一个软件中完成他们的整个工作流程,从原始数据到统计意义,使用他们自己的专业知识和熟悉的工具与数…

java养老系统养老院系统养老院网站源码

简介 本系统是养老院系统,主要是老人入住养老院的业务逻辑,有护工和医生对老人进行护理看病记录等信息管理,缴费入住外出记录管理等。 演示视频 https://www.bilibili.com/video/BV18i4y1Z7je/?share_sourcecopy_web&vd_sourceed0f04fb…

2022(核酸年)结束了

目录2022目标回顾2022生活回顾2023目标祝词现在是北京时间2022-12-30 15:08,再有一天2022就结束了,岁月催人老啊!同样又到了一年一度总结的时候了,我清楚记得在 2021年度总结中定下了我的今年目标,即如此那我们一同看看…

strcmp(),strcat(),strcpy()函数复习与模拟实现

tips 1. 与--都是有副作用的,而有关于位的运算都是没有副作用的。 既然是与字符串有关的函数,不得不提一下:\0是字符串结束符,对应到ascll表里面是空字符NULL,对应的ACSLL码为0. 1. 字符串许多函数的操作与\0有些密…

剩余电流继电器在大型游乐场所中的应用探讨

【摘要】游乐场所中大型游乐设备的运转离不开电力系统的支持,例如受到小朋友们欢迎的观光火车,自控飞机,豪华转马等。目前许多游乐经营者在安全用电方面的意识还比较薄弱,存在一定的游乐安全隐患,本文就剩余电流继电器…

机器学习笔记之Sigmoid信念网络(三)KL散度角度观察醒眠算法

机器学习笔记之Sigmoid信念网络——KL散度角度观察醒眠算法引言回顾: 醒眠算法过程KL Divergence\text{KL Divergence}KL Divergence观察醒眠算法引言 上一节介绍了MCMC以及平均场理论变分推断方法的弊端并介绍了醒眠算法(Weak-Sleep Algorithm)。本节将介绍从KL散…

ThinkPHP历史漏洞

文章目录ThinkPHP简介Thinkphp历史漏洞Thinkphp 2.x 任意代码执行漏洞漏洞描述影响版本漏洞复现Thinkphp5.0.23远程代码执行漏洞(CVE-2018-20062)漏洞描述影响版本漏洞复现ThinkPHP 5.0.x 未开启强制路由导致的RCE 漏洞分析(CNVD-2018-24942)漏洞描述影响版本漏洞复现ThinkPHP简…

2023元旦假期值得关注的空投与埋伏任务

不知不觉2023年元旦即将到来,这也是十一国庆之后大家迎来的第一次小假期,相信不少人已经开始“家里蹲”计划,不少项目方也最近搞了一些空投任务,刚好趁此时间也能刷空投,获得意外惊喜,这里我们为大家总结最…

【redis有序集合操作】

【zcount:统计有序集合分数区间内的成员数量】 zadd user_login 1 one zadd user_login 3 two zadd user_login 4 three zadd user_login 5 four ZCOUNT 返回有序集 key 中, score 值在 min 和 max 之间(默认包括 score 值等于 min 或 max )的成员的数量…

socket套接字

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起探讨和分享Linux C/C/Python/Shell编程、机器人技术、机器学习、机器视觉、嵌入式AI相关领域的知识和技术。 socket套接字1. 什么是socket套接字2. socket编程3. 网络字节序4. IP地址转换函数5. sockaddr数据结构…