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

JavaScript前端面试题——fetch

news 2026/3/26 10:15:21

什么是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

KKManager：Illusion游戏模组管理终极指南，一键安装更新所有插件和卡片

KKManager&#xff1a;Illusion游戏模组管理终极指南&#xff0c;一键安装更新所有插件和卡片 【免费下载链接】KKManager Mod, plugin and card manager for games by Illusion that use BepInEx 项目地址: https://gitcode.com/gh_mirrors/kk/KKManager KKManager是一…...

编程新知 2026/3/26 8:52:38

Windows 10/11 下保姆级 APK 逆向环境搭建：JDK、APKTool、JADX 一步到位

Windows 10/11 下保姆级 APK 逆向环境搭建&#xff1a;JDK、APKTool、JADX 一步到位 逆向工程是许多安全研究人员和开发者探索应用内部机制的重要技能。对于 Android 应用来说&#xff0c;搭建一个稳定可靠的逆向环境是第一步。本文将详细介绍如何在 Windows 系统上配置完整的…...

编程新知 2026/3/26 8:04:27

CosyVoice CPU运行效率优化实战：从原理到性能调优

最近在做一个实时语音处理的项目&#xff0c;用到了CosyVoice这个框架。项目上线初期&#xff0c;发现服务在CPU上的表现不太理想&#xff0c;尤其是在处理并发语音流时&#xff0c;CPU占用率经常飙高&#xff0c;处理延迟也时高时低&#xff0c;很不稳定。经过一番排查和优化&…...

编程新知 2026/3/26 7:46:25

NumPy：数组复制与视图

在使用 NumPy 进行数据处理时&#xff0c;数组对象不仅可以被读取或修改&#xff0c;还经常需要在不同变量或不同数组之间进行“复制”。例如&#xff1a;将一个数组赋值给另一个变量、通过切片获取数组的一部分、或显式创建新的数组副本。需要注意的是&#xff0c;这些操作在语…...

编程新知 2026/3/26 7:46:25

告别配对烦恼：用Auracast蓝牙广播，让手机、耳机和电视实现一拖多音频共享

告别配对烦恼&#xff1a;Auracast蓝牙广播重塑多设备音频共享体验 清晨七点的健身房&#xff0c;二十位健身爱好者同时戴上耳机&#xff0c;电视里的晨间新闻通过Auracast技术瞬间传入每个人的耳中&#xff1b;家庭影院里&#xff0c;父亲用电视播放电影&#xff0c;母亲通过降…...

编程新知 2026/3/26 7:28:21

告别打包烦恼：Qt Installer Framework 4.6 保姆级教程，从配置到生成exe安装包

Qt Installer Framework 4.6 终极实战指南&#xff1a;从零构建专业级安装包 当你终于完成了一个Qt应用的开发&#xff0c;编译了Release版本&#xff0c;甚至用windeployqt处理了依赖&#xff0c;接下来面临的挑战是如何将这些文件打包成一个专业的安装程序。这正是Qt Instal…...

编程新知 2026/3/26 6:39:47

VideoAgentTrek-ScreenFilter快速部署：基于Docker与ComfyUI的可视化工作流搭建

VideoAgentTrek-ScreenFilter快速部署&#xff1a;基于Docker与ComfyUI的可视化工作流搭建 你是不是也对那些能自动处理视频、实现智能过滤的AI模型感到好奇&#xff0c;但又觉得命令行操作太复杂&#xff0c;参数调整像在猜谜&#xff1f;别担心&#xff0c;今天我们就来聊聊…...

编程新知 2026/3/26 6:35:46

零代码玩转视觉定位：基于Qwen2.5-VL的Chord模型，Gradio界面快速上手

零代码玩转视觉定位&#xff1a;基于Qwen2.5-VL的Chord模型&#xff0c;Gradio界面快速上手 1. 视觉定位技术简介 视觉定位&#xff08;Visual Grounding&#xff09;是一项让计算机能够理解自然语言描述并在图像中精确定位目标对象的技术。想象一下&#xff0c;当你对计算机…...

编程新知 2026/3/26 6:33:44

RWKV7-1.5B-g1a企业应用案例：替代传统规则引擎做智能FAQ与文档摘要

RWKV7-1.5B-g1a企业应用案例&#xff1a;替代传统规则引擎做智能FAQ与文档摘要 1. 引言&#xff1a;企业文本处理的痛点与机遇 在传统企业IT系统中&#xff0c;FAQ系统和文档摘要功能通常依赖规则引擎实现。这种方案存在几个明显痛点&#xff1a; 维护成本高&#xff1a;每次…...

编程新知 2026/3/26 5:15:51

OpenClaw+GLM-4.7-Flash自动化测试：3小时无人值守执行日志分析

OpenClawGLM-4.7-Flash自动化测试&#xff1a;3小时无人值守执行日志分析 1. 为什么选择这个技术组合 上个月团队新上线了一个分布式服务&#xff0c;每天产生近10GB的日志文件。最初我们尝试用传统脚本分析&#xff0c;但发现两个痛点&#xff1a;一是日志格式不统一&#x…...

编程新知 2026/3/26 4:23:27