当前位置： 首页 > news >正文

JavaScript前端面试题——fetch

news 2025/7/3 16:33:35

什么是fetch？

fetch：fetch是浏览器内置的api，用于发送网络请求

ajax&axios&fetch的关系

ajax：ajax 是一种基于原生 JavaScript 的异步请求技术。它使用 XMLHttpRequest 对象来发送请求和接收响应。

axios：axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它提供了更高级别的封装，使发送请求和处理响应更加简单和灵活。

fetch：fetch 是浏览器内置的 API，用于发送网络请求。它提供了一种现代化、基于 Promise 的方式来进行网络通信。用法和axios类似，但相比于 axios，它的功能和封装级别更为简单。

我之前一直以为AJAX和axios是同一个东西，现在才发现并不是

axios是一个独立的第三方库，用法简单，功能强大，所以开发时常用的是axios

而学习AJAX则是帮我们去理解请求的底层原理，可以说：axios内部封装了AJAX

而fetch的应用场景呢？——基本上只在面试中会遇到哈哈哈哈哈哈哈哈。但如果一个项目中只用到了一两个请求，这时候把axios引进来就有点小题大做了，所以这时候也可以考虑用fetch

fetch核心语法

mdn官网：Window：fetch() 方法 - Web API | MDN (mozilla.org)

Window 接口的 fetch() 方法用于发起获取资源的请求，它会返回一个会在请求响应后兑现的 promise -> 返回的是promise对象，所以可以用.then，可以await，async。通常需要用await来等待返回的promise对象

该 promise 会兑现一个表示请求响应的 Response 对象 -> Response - Web API | MDN (mozilla.org)

在请求返回的response对象中，比较常用的属性是status，也就是响应状态码

Response 实现了 Body 接口，所以以下方法同样可用，比较常用的是.json()方法，该方法可以拿到服务器返回的数据，该方法返回的也是一个promise对象，所以也需要用await来等待

下面是一个fetch请求示例

接下来我们用fetch请求来实现获取地区列表的需求

案例中我们将用到这个测试接口：

 通过接口文档我们可以写出如下代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>fetch核心语法</title>
</head><body><h2>fetch核心语法</h2><button class="btn">测试</button><script>document.querySelector('.btn').addEventListener('click', async () => {const p = new URLSearchParams({ pname: '广东省', cname: '深圳市' })// 1.如何发请求? 默认是get方法,参数1 url地址,返回的Promiseconst res = await fetch('http://hmajax.itheima.net/api/area?' + p.toString())// const res = await fetch('http://hmajax.itheima.net/api/area1234')// console.log(res)if (res.status >= 200 && res.status < 300) {// 2.如何处理响应(JSON)? .json方法解析json.返回Promiseconst data = await res.json()console.log(data)} else {// 3.如何处理异常?console.log('请求异常', res.status)}})    </script>
</body></html>

 该代码实现的功能是点击“测试”按钮，控制台将会打印服务器返回的数据（也就是打印广东省深圳市的地区列表）

代码解释

一般在 GET 请求中，在 HTTP 请求中，需携带URL 查询参数，URL 查询参数是指在 URL 中通过 ? 后面附加的键值对形式的数据，用于向服务器传递额外的信息。查询参数以 key=value 的形式组成，多个参数之间使用 & 符号分隔。

例如，在以下 URL 中的查询参数是 pname=广东省&cname=深圳市：

http://hmajax.itheima.net/api/area?pname=广东省&cname=深圳市

  • new URLSearchParams({...})：这是 JavaScript 中的一个内置类，用于处理 URL 查询参数。传入一个对象 { pname: '广东省', cname: '深圳市' } 作为参数，该对象的键值对将被转换为 URL 查询参数的形式。
  • p：是一个 URLSearchParams 对象的实例，它包含了参数 pname=广东省&cname=深圳市。

 上述代码是为了让大家了解new URLSearchParams({...})这个内部类，而为了简化代码，我们可以直接将上述代码写成下面这样

如果你想让代码看起来更加简短，可以不用变量来接收请求返回的promise对象，我们可以直接通过.then的链式结构来处理所有逻辑，代码如下，这段代码的逻辑和实现的功能和上面的代码是一样的，只是写法不同。只不过为了使代码便于理解，通常还是使用await，async

为什么我们要学fetch？

博客写到这里，我心里的一个疑问突然有了解答——为什么我们要学fetch？只是为了面试吗？

说实话，我是真不理解我们为什么要学fetch，我学完了前端三件套，学完了vue，学完了axios，甚至还写了两个项目。对fetch一无所知，但是丝毫不影响我写项目，如果不是要准备面试，我甚至怀疑我一辈子都不会去学fetch。那么面试为什么要问这种实际工作中根本没啥实际用途的八股文？我实在是不能理解

但今天，我突然回想起之前我和一个后端队友合作了一个英语口语项目，那次合作很失败。因为我只懂前端，他只懂后端，我俩在沟通上存在很大的障碍。后来他用AI给我生成了一份请求demo，但奈何这demo是用fetch写的，我当时根本不知道除了axios之外还有这种请求方式，所以demo看得也很吃力

而接口文档上得代码示例其实也是用fetch写的，如果不学的话，还真的看不懂

最后再来个综上所述，哈哈哈哈哈哈哈哈哈哈哈，所以学fetch还是有点用的，不止面试

提交FormData

下面是请求提交FormData的基本格式，因为fetch请求默认提交FormData，所以不需要设置请求头（请求头的作用是告诉服务器请求体的数据格式）

接下来我们实现一个需求：上传图片及图片回显，调用的接口如下上传-图片 - AJAX阶段 (apifox.com)

代码如下，注释写得很详细，相信聪明的你们一定能看懂

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>fetch提交FormData</title>
</head><body><h2>fetch提交FormData</h2><!-- 选择图片 --><input type="file" class="ipt"><!-- 图片回显 --><img class="icon" src="" alt=""><script>/*** fetch提交FormData*  1.如何设置请求方法?*  2.如何提交数据?* */document.querySelector('.ipt').addEventListener('change', async function () {const img = this.files[0] //获取用户上传的文件对象const data = new FormData() //创建formdata对象data.append('img', img) //以键值对的方式往对象里追加// console.log(img)// 1.如何设置请求方法?// 2.如何提交数据?const res = await fetch('http://hmajax.itheima.net/api/uploadimg', {// 请求方法method: 'post',// 提交的数据body: data})const resData = await res.json() //resData中包含了服务器返回的图片路径console.log(resData)// 回显document.querySelector('.icon').src = resData.data.url //将图片路径设置给图片标签的src属性，实现回显功能})</script>
</body></html>

浏览器运行效果是这样的

提交JSON

因为fetch请求默认提交FormData，所以提交JSON格式的数据需要先设置请求头

其次，因为body的数据需要提交JSON格式的数据，而且fetch不像axios，axios的请求体数据默认是JSON格式，但fetch不是，所以请求体的内容需要用JSON.stringfy转化为JSON

接下来我们实现注册账号的需求，需要用到如下接口：注册账号 - AJAX阶段 (apifox.com)

 代码如下

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>fetch提交JSON</title>
</head><body><h2>fetch提交JSON</h2><button class="btn">提交JSON</button><script>document.querySelector('.btn').addEventListener('click', async () => {// 实例化Headers对象const headers = new Headers()// append 添加keyvalueheaders.append('content-type', 'application/json')const res = await fetch('http://hmajax.itheima.net/api/register', {method: 'post',headers,// JSON.stringify 对象-->JSONbody: JSON.stringify({username: 'itheima666',password: '123456'})})// res.status 判断状态码const data = await res.json()console.log(data)})</script>
</body></html>

相关文章：

JavaScript前端面试题——fetch

什么是fetch&#xff1f; fetch&#xff1a;fetch是浏览器内置的api&#xff0c;用于发送网络请求 ajax&axios&fetch的关系 ajax&#xff1a;ajax 是一种基于原生 JavaScript 的异步请求技术。它使用 XMLHttpRequest 对象来发送请求和接收响应。 axios&#xff1a;…...

编程日记 2024/8/3 4:39:44

在Qt中获取Windows中进程的PID

主要是用到了系统自带的工具【tasklist.exe】 利用 QProcess调用这个tasklist有一点坑&#xff0c;已经在代码中指出了。 指定为csv格式输出的话&#xff0c;在后处理时比较方便。 QList<quint64> listProcessIdentifier(QString processName) {QProcess process;QStrin…...

编程日记 2024/8/3 4:38:43

8.1-java+tomcat环境的配置+代理

一、回顾 1.安装nodejs&#xff0c;这是一个jdk一样的软件运行环境 yum -y list installed|grep epel yum -y install nodejs node -v 2.下载对应的nodejs软件npm yum -y install npm npm -v npm set config .....淘宝镜像 3.安装vue/cli command line interface 命令行…...

编程日记 2024/8/3 4:37:42

gorm框架实现基本的增删改查

连接数据库 package mainimport ("github.com/jinzhu/gorm"_ "github.com/jinzhu/gorm/dialects/mysql" )func main() {db, err : gorm.Open("mysql","root:roottcp(127.0.0.1:3306)/test?charsetutf8mb4&parseTimeTrue&locLocal…...

编程日记 2024/8/3 4:33:36

AUTOSAR介绍

1、AUTOSAR架构介绍 AUTOSAR(AUTomotive Open System ARchitecture&#xff0c;汽车开放系统架构)是汽车和软件行业领先公司的全球合作联盟&#xff0c;为智能移动开发和建立标准化的软件框架以及开放的E/E系统架构。考虑到目前和未来市场中不同的汽车E/E架构&#xff0c;AUTOS…...

编程日记 2024/8/3 4:32:35

10. 计算机网络HTTP协议

1. 前言 无论是作为后端开发、前端开发、测试开发程序员或者是运维人员，在面试过程中，大概率都会被问到 HTTP 协议相关题目。 因为伴随着 2010 年之后移动互联网在全世界的高速发展，各种各样的浏览器（Chrome、FireFox、Safari 等）层出不穷，也诞生了诸多服务端开发的语言…...

编程日记 2024/8/3 4:30:32

“职场中，不要和上司作对”，真的很重要吗？你认同这句话吗？

在职场上&#xff0c;领导对下属的期望永远都只有两个字&#xff0c;不是忠诚&#xff0c;也不是能力&#xff0c;而是省心。 领导对下属的要求就是别让我操心。 在职场中&#xff0c;通常面临的首要问题就是如何与领导相处。 把职场中的前辈当作老师来尊重&#xff0c;你尊…...

编程日记 2024/8/3 4:29:31

可视化目标检测算法推理部署（一）Gradio的UI设计

引言 在先前RT-DETR模型的学习过程中&#xff0c;博主自己使用Flask框架搭建了一个用于模型推理的小案例&#xff1a; FlaskRT-DETR模型推理 在这个过程中&#xff0c;博主需要学习Flask、HTML等相关内容&#xff0c;并且博主做出的页面还很丑&#xff0c;那么&#xff0c;是…...

编程日记 2024/8/3 4:28:30

【PyTorch】基于YOLO的多目标检测项目（一）

【PyTorch】基于YOLO的多目标检测项目&#xff08;一&#xff09; 【PyTorch】基于YOLO的多目标检测项目&#xff08;二&#xff09; 目标检测是对图像中的现有目标进行定位和分类的过程。识别的对象在图像中显示有边界框。一般的目标检测方法有两种&#xff1a;基于区域提议的…...

编程日记 2024/8/3 4:27:29

spring boot 实现 Stream 钉钉事件订阅

1: 参考链接 https://open.dingtalk.com/document/orgapp/develop-stream-mode-push-server 2&#xff1a;钉钉开放平台订阅配置 配置之后运行一下上面提供的链接 里面的main方法&#xff0c;验证通道 3&#xff1a;订阅启动方式 EventListenerThread eventListenerThrea…...

编程日记 2024/8/3 4:26:28

基于 Rough.js 的 Vue 散点图绘制

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 基于 Rough.js 的 Vue 散点图绘制 应用场景 本代码展示了如何使用 Rough.js 库在 Vue 应用程序中绘制散点图。Rough.js 是一个轻量级 JavaScript 库&#xff0c;用于创建具有手绘风格的可视化效果。散点图是一…...

编程日记 2024/8/3 4:25:27

【c++】用c++指针传递来模拟“靶向治疗”

一：源码： #include <iostream>void targetedTherapy(bool* flag) {if (*flag == false) {*flag = true;} }int main() {//代表一系列癌细胞//true为健康细胞 false为癌变细胞bool cancerCell[7] = {true, false, true, true, true, true, false};for (int i = 0; i &…...

编程日记 2024/8/3 4:21:22

如何开启idea中的断言功能？

目录 一、什么是断言&#xff1f; 二、Java断言的语法 三、开启断言 一、什么是断言&#xff1f; 断言&#xff08;assert&#xff09;是 Java 中的一条语句&#xff0c;一种在程序中的逻辑&#xff08;如一个结果为真或假的逻辑判断式&#xff09;&#xff0c;目的是验证软…...

编程日记 2024/8/3 4:19:17

大模型之语言大模型技术

本文作为大模型综述第二篇，介绍语言大模型基本技术。 近年来，在 Transformer 架构基础上构建的预训练语言模型为自然语言处理领域带来了一系列突破式进展，成为人工智能主流技术范式。预训练语言模型采用“预训练+微调”方法，主要分为两步： 1）将模型在大规模无标注数据上…...

编程日记 2024/8/3 4:18:16

浮点数例外 (核心已转储) 的问题记录

一般这种问题&#xff0c;是程序运行过程中出现浮点数运算错误导致的程序崩溃 浮点异常可能由以下几个原因引起&#xff1a; 除以零&#xff1a;当程序中出现除以零的操作时&#xff0c;会触发浮点异常。例如&#xff0c;当一个数除以0时&#xff0c;会导致浮点异常。数值溢出…...

编程日记 2024/8/3 4:16:13

Vite项目中根据不同打包命令配置不同的后端接口地址，proxy解决跨域

在vite.config.ts同级目录添加两个文件 .env.development #开发环境 VITE_APP_ENV developmentVITE_APP_BASE_API .env.production #生产配置 VITE_APP_ENV productionVITE_APP_BASE_API https://www.bdjw.work代码中使用路径 const request axios.create({baseURL: i…...

编程日记 2024/8/3 4:15:12

Java新手启航：JDK 21 版本安装，开启编程之行

在Java开发前&#xff0c;JDK是必不可少的环境&#xff0c;接下来&#xff0c;让我们一起完成JDK 21版本的下载和安装&#xff01; 种一棵树最好的时间是10年前&#xff0c;其次就是现在&#xff0c;加油&#xff01; …...

编程日记 2024/8/3 4:14:11

Redis学习[5] ——Redis过期删除和内存淘汰

六、Redis过期键值删除 6.1 Redis的过期键值删除策略 6.1.1 什么是过期键值删除&#xff1f; Redis中是可以对key设置过期时间的&#xff0c;所以需要有相应的机制将已过期的键值对删除&#xff0c;也就是**过期键值删除策略。Redis会用一个过期字典&#xff08;expires dic…...

编程日记 2024/8/3 4:13:10

书生大模型学习笔记 - Python

Python实现wordcount 请实现一个wordcount函数&#xff0c;统计英文字符串中每个单词出现的次数。返回一个字典&#xff0c;key为单词&#xff0c;value为对应单词出现的次数。 解题思路&#xff1a;首先把字母转小写>然后把单词取出来去除标点>循环单词列表>key已存…...

编程日记 2024/8/3 4:12:08

spring security和核心流程

...

编程日记 2024/8/3 4:11:07

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/7/2 11:52:03

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/6/20 17:50:34

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/6/18 8:29:05

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/6/22 2:52:41

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2025/6/24 2:18:23

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/6/26 11:26:20

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/7/3 3:02:49

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/6/24 4:37:33

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/6/19 14:18:18

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/6/25 15:50:42