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

Web 开发 12

news 2025/8/5 5:51:02

1  网址里的 “搜索请求” 结构

这张图是在教你怎么看懂 网址里的 “搜索请求” 结构，特别基础但超重要，对你学前端帮别人做搜索功能超有用，用大白话拆成 3 步讲：

1. 先看「协议（Protocol）」

HTTPS 就是浏览器和服务器沟通的 “安全规矩”，保证你搜东西时，传递的内容（比如你搜啥关键词）不会被别人偷偷看到、篡改，就像寄快递用 “加密包装”，安全送到。

2. 再看「服务器网址（Target）」

https://www.youtube.com/results 是 YouTube 服务器里 “负责处理搜索” 的固定地址，相当于你想找 YouTube 要搜索结果，得先找到它家 “搜索部门” 的门牌号 。

3. 最后看「查询参数（Query Params）」

search_query=web+lab 是你给服务器的 “搜索指令” ！search_query 是规矩里的 “关键词标签”（告诉服务器这是搜索内容），web+lab 是你实际想搜的内容（用 + 代替空格，浏览器的小习惯）。服务器收到这个，就会返回和 web lab 相关的 YouTube 视频结果啦～

总结：整个网址就是让浏览器带着 “安全规矩”，拿着 “搜索部门地址”+“你要搜的内容”，去 YouTube 服务器要结果，就像你带着 “暗号 + 地址 + 需求”，找朋友帮你找东西一样 ，前端里做搜索功能，经常得这么拼网址、传参数哟～

2  HTTP 请求的两个关键组成部分

 

 HTTP 请求的两个关键组成部分，是前端和服务器打交道的基础，用大白话拆成两部分讲：

左边「Request Headers（请求头）」

  • 作用：给服务器 “额外信息”，让服务器更懂你的请求，比如：
    • Host：告诉服务器你要访问哪个域名（比如 developer.mozilla.org ），防止服务器 confused；
    • User-Agent：说明 “你用啥浏览器、啥系统”（比如 “Firefox/50.0” ），服务器知道后，能给你返回适配你浏览器的页面；
    • Accept：告诉服务器 “你能看懂啥格式的内容”（比如要 HTML 网页、JSON 数据 ），方便服务器给你对应的数据；
      简单说就是：给请求加 “背景信息”，让服务器更贴心回应你，所以 PPT 里说 “fancy stuff（花里胡哨但有用的细节）”～

右边「Request Body（请求体）」

  • 作用：存 “请求的核心数据”，常见于 POST 请求（比如注册、提交表单 ）。
    • 举个栗子：注册新用户时，Request Body 里会装 “用户名、密码、邮箱” 这些信息，服务器拿到后，就知道要新建一个用户；
    • 格式：通常用 JSON（和 JavaScript 对象写法很像 ），因为简单、通用，服务器和前端都能看懂；
      简单说就是：** 存你要发给服务器的 “正经数据”，是请求的 “核心内容”**～

总结一下：
你给服务器发请求时，请求头（Headers）是 “辅助信息”（让服务器了解你的环境、需求），请求体（Body）是 “核心数据”（你真正要提交给服务器的内容）。

前端写登录、注册、提交表单，都会用到这俩，是和后端沟通的必备知识！

3 URL和路由

【什么叫URL啊，路由吗？】。实在是很愚蠢的提问啊！

URL（Uniform Resource Locator）即统一资源定位符，它和路由有一定联系，但并不完全等同。

URL

URL 是用来在互联网上标识和定位资源的一种地址，就像是你在现实生活中要找某个地方需要知道它的具体地址一样，在网络里要获取特定资源，就得通过 URL 。

一个完整的 URL 通常包含以下几个部分 ：

  • 协议部分：常见的有 http://（超文本传输协议，用于普通网页访问）和 https://（在 http 基础上增加了加密功能，用于安全的网页访问，比如涉及支付的页面 ），它规定了浏览器和服务器之间如何传输数据。
  • 域名部分：比如 www.baidu.com ，它对应着服务器在网络中的地址，就像一个门牌号，浏览器根据它找到对应的服务器。
  • 端口部分：如果不写，通常会使用默认端口，比如 http 默认是 80 端口，https 默认是 443 端口。特定服务可能会使用其他端口，比如 MySQL 数据库默认 3306 端口。不过在日常访问网页时，默认端口一般省略不写。
  • 路径部分：在服务器上定位具体资源的位置，例如 https://www.example.com/blog/article1 中，/blog/article1 就表示在 example.com 服务器上 blog 目录下的 article1 这个资源。
  • 查询参数部分：以 ? 开头，后面是一些键值对，用于向服务器传递额外信息，比如 https://www.example.com/search?keyword=前端 ，keyword=前端 就是查询参数，告诉服务器要搜索和 “前端” 相关的内容。

路由

在 web 开发尤其是前端框架（比如 Vue Router、React Router）里，路由指的是根据不同的 URL 路径，匹配并渲染对应的组件或页面 。

  • 前端路由：通过 JavaScript 监听 URL 的变化（比如 hash 变化或者 history 模式下的 URL 变化 ），然后动态地更新页面内容，而不需要重新加载整个页面。比如在单页面应用（SPA）中，访问 http://example.com/home 和 http://example.com/about ，页面不会重新刷新，而是根据不同的路由规则，加载不同的组件展示内容。
  • 后端路由：在后端服务器中，根据不同的 URL 路径，匹配对应的处理函数或控制器。例如，在 Node.js 里使用 Express 框架，你可以定义 app.get('/user', function(req, res) { /* 处理获取用户信息逻辑 */ }) ，当用户访问 http://yourserver.com/user 时，就会执行对应的处理函数，返回相关数据。

两者关系

可以把 URL 理解成一个大的标识，而路由是对 URL 中路径部分进行解析和处理的一种机制。路由根据 URL 的路径信息，决定采取什么样的操作，比如展示哪个页面、执行哪个后端逻辑 ，是对 URL 进行更细致的管理和响应。

4  HTTP 状态码（Status Codes）

1. 1xx（ informational - 信息提示 ）

  • 作用：服务器已收到请求，告诉你 “正在处理，别着急”，实际开发中很少直接碰到，属于 “中间状态”。
  • 例子：100 Continue（服务器说 “你继续发数据，我准备好了” ），一般浏览器自动处理，用户感知不到。

2. 2xx（ you succeeded - 请求成功 ）

  • 作用：服务器说 “成了！你的请求我完美处理啦”，前端拿到这系列状态码，就可以开心渲染数据～
  • 常用码：
    • 200 OK（最常见，请求成功，服务器给你返回数据，比如页面、接口数据 ）；
    • 201 Created（一般用在新增数据，比如注册用户、发帖子成功，服务器 “创建资源成功” ）。

3. 3xx（ redirect - 重定向 ）

  • 作用：服务器说 “你要的东西不在这，我指引你去新地址找”，浏览器会自动跳转到新地址。
  • 常用码：
    • 301 Moved Permanently（永久重定向，比如旧网址不用了，永久跳转到新网址，搜索引擎会更新索引 ）；
    • 302 Found（临时重定向，比如维护时，临时跳转到备用页面 ）；
    • 304 Not Modified（资源没变化，服务器让浏览器直接用缓存，省流量 ）。

4. 4xx（ you did something wrong - 客户端错误 ）

  • 作用：服务器说 “你发的请求有问题，我没法处理”，大部分是前端 / 用户的锅（比如传参错、权限不够 ）。
  • 常用码：
    • 400 Bad Request（请求写错了，比如接口传参格式不对，服务器看不懂 ）；
    • 401 Unauthorized（没权限，比如没登录就访问需要登录的页面 / 接口 ）；
    • 403 Forbidden（服务器认出你了，但就是不让你访问，比如权限不够 ）；
    • 404 Not Found（经典！要找的资源 / 页面 / 接口不存在，比如输错网址 ）。

5. 5xx（ server did something wrong - 服务器错误 ）

  • 作用：服务器说 “哎呀，我内部出问题了，没法处理你的请求”，是服务器的锅（代码 bug、服务器崩了 ）。
  • 常用码：
    • 500 Internal Server Error（服务器内部报错，比如代码抛异常了 ）；
    • 502 Bad Gateway（服务器当 “网关” 时出错，比如反向代理、负载均衡环节出问题 ）；
    • 503 Service Unavailable（服务器太忙 / 维护中，没法响应，比如双 11 抢购把服务器打崩 ）。

一句话总结

  • 1xx：“我收到了，处理中”
  • 2xx：“成了！”
  • 3xx：“去那边找→”
  • 4xx：“你发的请求有毛病！”
  • 5xx：“我服务器炸了……”

开发时，遇到接口报错，先看状态码属于哪类，能快速定位问题（是自己传参错，还是服务器崩了 ），超有用！想深入学可以戳 PPT 里的链接 👉 HTTP Status Codes - REST API TutorialThis page is created from HTTP status code information found at ietf.org and Wikipedia.Click on the category heading or the status code link to read more.1xx Informational This class of status code indicates a provisional response, consisting only of the Status-Line and optional headers, and is terminated by an empty line. There are no required headers for this class of status code. Since `HTTP/1.0` did not define any `1xx` status codes, servers MUST NOT send a `1xx` response to an `HTTP/1.https://www.restapitutorial.com/httpstatuscodes.html 有更全的案例～

5  API（应用程序编程接口）

  • 全称：Application Program Interface（应用程序编程接口 ）
  • 作用：是一组 “端点（endpoint）”，允许你向某个服务发起请求，简单说就是 “别人开放给你用的功能入口” ，比如想调用百度地图、微信支付的功能，就通过它们的 API 对接。
  • 实际案例：谷歌（Google）、亚马逊（Amazon）、脸书（Facebook ）等大公司，都会开放 API ，让其他开发者 / 公司能借助它们的服务（比如用谷歌地图 API 做地图功能，用亚马逊 API 对接云服务 ）。

API 是 “别人做好的功能接口”，你不用自己从头开发复杂功能，直接通过 API 调用别人的服务，省时省力。

6 调用外部 API 时 “API key/token 的作用和传递方式

【什么叫token？】

在 API 调用等场景中，token（令牌 ）是一串用于身份验证和授权的字符串，它就像是一把 “电子钥匙”，作用如下：

身份验证

当你通过 API 去访问某个服务时，服务器需要确认你是否有资格使用该服务。

token 就用于证明你的身份，只有携带有效的 token，服务器才会认为你是经过授权的合法使用者。比如你想调用某天气 API 获取数据，就需要先在该 API 平台注册申请一个 token，每次请求时带上这个 token，服务器验证 token 有效，才会给你返回天气数据 。

权限控制

不同的 token 可能对应不同的权限。例如，在一个用户管理 API 中，普通用户的 token 可能只能查看自己的信息，而管理员的 token 除了查看信息，还能进行用户创建、删除等操作 。

流量限制（rate limit）

一些 API 提供方会根据 token 来对使用者进行流量限制。比如，免费版的 token 可能限制每天只能调用 API 100 次，而付费版的 token 调用次数则会更多 。

传输位置

token 可以放在 HTTP 请求的不同位置，如查询参数（query params）里，

像https://api.example.com/data?token=your_token_value ；

也可以放在请求体（body）中，不过这种方式一般用于像 POST 请求提交表单数据等情况 ；

还能放在请求头（header）里，

常见的写法是Authorization: Bearer your_token_value ，这是一种比较安全且常用的方式，

能避免 token 在 URL 中被轻易看到 。

1. API key/token 的核心作用

很多外部 API（比如地图、天气、支付接口 ），会要求你用 API key 或 token ，用来：

  • 限流（rate limit）：限制你 “调用 API 的频率 / 次数”，防止你把人家服务器打崩，或者区分免费 / 付费用户（比如免费用户 1 天只能调 100 次，付费用户能调 1 万次 ）。
  • 计费（charge）：记录你用了多少 API 资源，按调用量收钱（类似 “你用多少流量，运营商收多少钱” ）。

2. API key/token 的传递位置

拿到 key 或 token 后，你得在 HTTP 请求里带上它，有 3 种常见 “放法”：

  • Query Params（查询参数）：直接拼在 URL 里，像 https://api.example.com/data?token=xxx ，简单但不太安全（别人能从 URL 看到 ）。
  • Body（请求体）：把 key/token 放到请求体里（比如 POST 请求的表单、JSON 数据 ），适合传大量数据时用。
  • Header（请求头）：放在请求头里（比如 Authorization: Bearer xxx ），相对安全、规范，很多 API 推荐这么传。

总结：

调用外部 API 时，得用 key/token “证明身份 + 控制调用量 / 付费”，

而且要选一种方式（URL、请求体、请求头 ）把它传给 API 服务器，人家才给你干活。
（简单说就是：想用别人的 API ？先领 “身份凭证”，再按规矩把凭证放进请求里，不然不让用 ）

7 web里面的promise是什么？

在 Web 开发（尤其是 JavaScript）里，Promise 是用来优雅处理异步操作的工具。

在 Web 开发中，尤其是 JavaScript 语言里，Promise既不是单纯的方法，也不是外部引入的库 ，它是ES6（ECMAScript 2015）规范中新增的内置对象，用于更方便、优雅地处理异步操作。以下是详细介绍：

你可以把它理解成一个 “承诺”：当你发起一个需要等待的操作（比如从服务器加载数据、读取文件），Promise 会先 “答应” 你，等这个操作完成后，一定会给你一个结果 —— 要么成功返回数据，要么告诉你失败原因。

为什么需要 Promise？

没有 Promise 之前，处理多个异步操作可能会写成 “嵌套的回调函数”，比如：

javascript

// 嵌套回调（回调地狱）
loadData1(function(data1) {loadData2(data1, function(data2) {loadData3(data2, function(data3) {// 更多嵌套...});});
});

这种代码像 “金字塔” 一样越来越深，可读性差，不好维护。

Promise 怎么用？

Promise 把异步操作包装成一个对象，用链式调用替代嵌套，让代码更清晰。

基本用法：

javascript

// 1. 创建一个 Promise（表示一个异步操作）
const promise = new Promise((resolve, reject) => {// 模拟异步操作（比如从服务器请求数据）setTimeout(() => {const success = true; // 假设请求成功if (success) {resolve("拿到的数据：xxx"); // 成功时，用 resolve 返回结果} else {reject("出错了：网络故障"); // 失败时，用 reject 返回原因}}, 1000);
});// 2. 处理结果（链式调用）
promise.then(result => {// 成功时执行（拿到 resolve 的结果）console.log("成功：", result);}).catch(error => {// 失败时执行（拿到 reject 的原因）console.log("失败：", error);}).finally(() => {// 无论成功/失败，都会执行（比如关闭加载动画）console.log("操作结束");});

核心特点：

  1. 三种状态：

    • pending（进行中）：操作还没完成；
    • fulfilled（已成功）：操作完成，调用 resolve()；
    • rejected（已失败）：操作出错，调用 reject()。
      状态一旦变化（从 pending 到 fulfilled 或 rejected），就不会再变。

  2. 链式调用：
    then() 方法会返回一个新的 Promise，所以可以一直 .then().then() 下去，解决嵌套问题。

  3. 异步操作的 “容器”：
    不管是网络请求、定时器，还是其他异步操作，都能放进 Promise 里统一管理。

简单说：

Promise 就像一个 “快递单号”—— 你下单（发起异步操作）后，拿到单号（Promise 对象），不用一直盯着，等快递到了（操作完成），要么收到货（resolve），要么被告知丢件（reject），整个过程不用 “死等”，代码也更整洁。

前端开发中，调用 API 接口、处理文件上传等场景，几乎都会用到 Promise 或基于它的 async/await（更简洁的语法）。

8 Promise 的执行顺序、同步异步特性

核心是理解 “同步代码立即执行，Promise 回调等同步代码跑完后执行”，结合两题（第11点）总结：

一、核心知识点（Promise 与同步代码的执行顺序）

JavaScript 执行代码分「同步」和「异步」：

  • 同步代码：像 console.log("Hi there!")，会立即执行，优先跑完。
  • 异步代码：像 promise.then(...) 里的回调，会等同步代码跑完后，再执行（即使 Promise 已经 resolve ）。

二、结合两题理解

题目 1（Promise reject 场景）

js

const f = (promise) => {promise.then(val => console.log("a")).then(val => console.log("b")).catch(err => console.log("error!"));
};
const promise = /* 一个会 reject 的 Promise */;
f(promise);
  • 因为 promise 直接 reject，所以 .then 不会执行，直接触发 .catch → 只打印 error!
题目 2（Promise resolve 场景 + 同步代码）

js

const f = (promise) => {promise.then(val => console.log("a")).then(val => console.log("b")).catch(err => console.log("error!"));
};
const promise = /* 一个会 resolve 的 Promise */;
f(promise);
console.log("Hi there!"); // 同步代码
  • 执行顺序：
    1. 同步代码优先：先打印 Hi there!
    2. 再执行 Promise 回调：promise resolve 后，依次打印 a → b

三、总结规律

  1. Promise 状态决定回调执行：
    • resolve → 走 .then 链式调用；
    • reject → 跳过后续 .then，触发最近的 .catch。
  2. 同步代码 > 异步回调：
    不管 Promise 多快 resolve，它的回调都会等同步代码跑完才执行，这是 JavaScript “事件循环（Event Loop）” 的机制。

理解这两点，就能看透 Promise 执行顺序的题目啦～

9 .catch() 就是 Promise 版的 try...catch

.catch() 就是 Promise 版的 try...catch，专门用来捕获异步操作里的错误，给你拆分讲透：

1. 和 try...catch 像在哪？

  • try...catch（同步代码用）：
    写同步代码时，用 try 包着可能出错的代码，catch 抓错误：

    js

    try {// 可能出错的代码（比如变量没定义）console.log(xxx); 
} catch (err) {// 出错了就执行这里，打印错误console.log('出错啦：', err); 
}

  • .catch()（Promise / 异步代码用）：
    写 Promise 异步操作时，用 .then() 处理成功，.catch() 抓 “异步操作里的错误”：

    js

    get("/api/stories").then((storyObjs) => {// 异步成功了，执行这里setStories(storyObjs); }).catch((err) => {// 异步出错了（比如网络断了、服务器崩了），执行这里console.log("this is so sad: ", err.message); });
     

    核心逻辑一样：“试着执行代码 → 出错了就抓错误，别让程序崩掉”，只是一个管同步，一个管异步～

2. .catch() 具体干啥？

  • 时机：只有 Promise 走到 rejected 状态（比如异步操作失败、主动调用 reject() ），才会触发 .catch()。
  • 作用：
    • 捕获错误（比如网络请求失败、API 报错 ），避免程序直接崩溃；
    • 还能给用户提示（比如 “网络不好，刷新试试” ），或者记录错误日志（方便开发排查问题 ）。

3. 举个真实例子对比

比如 “从服务器拿故事数据”：

  • 用 try...catch（但它管不了异步！）：
    假设 get("/api/stories") 是异步操作，try...catch 抓不到异步错误，程序会直接崩：

    js

    try {// 异步操作，try...catch 管不住！get("/api/stories").then((storyObjs) => { setStories(storyObjs);});
} catch (err) {// 这里永远不会执行！因为异步错误没被捕获 console.log('抓不到异步错误'); 
}

  • 用 .catch()（专门管异步错误）：
    换成 .catch()，异步出错就会被捕获，程序能优雅提示：

    js

    get("/api/stories").then((storyObjs) => {setStories(storyObjs);}).catch((err) => {// 异步出错了，这里会执行！console.log("网络崩了：", err.message); });

一句话总结

  • try...catch 是同步代码的 “安全网”，抓同步错误；
  • .catch() 是Promise 异步代码的 “安全网”，抓异步错误。

你写前端调接口时，只要用 Promise 做异步操作（比如 fetch、axios ），后面跟个 .catch()，就能稳稳接住错误，超像 try...catch 的异步版.

10 Promise 异步操作

【promise异步式编程其实就是多任务同时进行吧，类似于并发事件？】

Promise 处理的异步操作和多任务同时进行（并发）有一定联系，但并不完全等同 ，以下是具体区别：

从概念角度看

  • Promise 异步操作：Promise 主要用于处理那些结果不是立即返回的操作，比如网络请求（从服务器获取数据）、读取本地文件等。它强调的是对异步操作的结果进行管理，即操作完成后是成功还是失败，并通过then()方法处理成功结果，catch()方法捕获失败情况。一个Promise代表一个异步操作，但它本身并不意味着多个任务同时在执行。

举个例子，使用Promise发送两个网络请求：

javascript

function requestData1() {return new Promise((resolve, reject) => {setTimeout(() => {resolve('数据1');}, 1000);});
}function requestData2() {return new Promise((resolve, reject) => {setTimeout(() => {resolve('数据2');}, 1500);});
}requestData1().then(result1 => {console.log(result1);return requestData2();}).then(result2 => {console.log(result2);}).catch(error => {console.log(error);});

在这段代码中，requestData1和requestData2两个异步操作是顺序执行的，requestData2要等requestData1成功执行完才会开始。

  • 并发事件：指的是多个任务在同一时间点或同一时间段内同时执行。比如在操作系统中，多个进程或线程可以并发执行，它们利用多核 CPU 或者时间片轮转等方式，让用户感觉多个任务好像是同时在运行。在浏览器环境中，Web Workers 可以实现真正意义上的多任务并发，它能开启新的线程，让一些计算密集型或耗时的任务在后台运行，不影响主线程（负责页面渲染和用户交互）的操作，比如同时进行图片处理和数据计算任务。

从实现机制角度看

  • Promise：基于 JavaScript 的事件循环机制。JavaScript 是单线程语言，没有传统意义上的多线程并发执行能力。事件循环会不断检查调用栈和任务队列，当调用栈为空时，会从任务队列中取出异步任务的回调放入调用栈执行。Promise 的异步操作也是通过事件循环来调度的，本质上是按照一定顺序依次处理异步操作的结果，而不是真正的多任务同时运行。

  • 并发：在多线程环境下，多个线程可以同时访问 CPU 资源，并行执行不同的任务。在浏览器的 Web Workers 中，虽然也是单线程 JavaScript 环境，但它开辟了独立于主线程的新线程，使得任务可以在不同线程中同时进行，实现了一定程度的并发效果。

从应用场景角度看

  • Promise：主要用于处理异步操作的先后顺序，以及优雅地处理异步操作的成功和失败情况。比如在前端开发中，按顺序获取用户信息、用户的订单列表等，或者在调用多个 API 时，根据前一个 API 的返回结果决定是否调用下一个 API 。

  • 并发：更适合处理那些可以并行执行，且不会相互干扰的任务，以提高执行效率。例如在大数据处理中，同时对多个数据块进行计算分析；在游戏开发中，同时处理游戏画面渲染和玩家输入响应等任务。

虽然Promise 本身不是多任务同时进行（并发），但它可以和其他技术（如 Web Workers）结合，在一定程度上实现更复杂的异步并发场景。

【然后每一个事件都有监听吗promise对应反馈，每一个“单子”都有一个记录？】

可以把 Promise 理解成 “带状态追踪的异步订单系统”，用「订单 + 监听」的思路，给你拆解它的 “反馈记录逻辑”，超适合新手理解：

1. 把 Promise 当 “异步订单”

想象你在奶茶店点单：

  • 下单（new Promise）：你点了一杯奶茶（发起异步操作，比如 fetch 数据、setTimeout 延迟任务 ），店员给你一个订单号（Promise 对象），此时订单状态是「制作中（pending）」。
  • 出餐（resolve/reject）：
    • 做好了（异步成功）→ 订单状态变成「已完成（fulfilled）」，还带着 “奶茶（结果数据）”；
    • 做砸了（异步失败）→ 订单状态变成「已失败（rejected）」，还带着 “做错的原因（错误信息）”。

2. “监听反馈” 就像 “订单通知”

你不用一直盯着做奶茶（不阻塞代码），而是用 .then() / .catch() 订阅 “订单结果”：

  • .then()：订阅「订单完成」的通知，拿到奶茶后执行 “喝奶茶（处理成功结果）”；
  • .catch()：订阅「订单失败」的通知，知道做错后执行 “换一杯（处理错误）”；

代码里长这样（对应奶茶订单）：

js

// 下单（发起异步操作）
const 奶茶订单 = new Promise((resolve, reject) => {setTimeout(() => {const 做成功了 = true; if (做成功了) {// 出餐成功 → 标记订单为「已完成」，附带结果resolve("芋泥波波奶茶"); } else {// 出餐失败 → 标记订单为「已失败」，附带原因reject("芋泥没有了"); }}, 1000); // 模拟做奶茶需要1秒
});// 监听订单结果：.then 收成功，.catch 收失败
奶茶订单.then(奶茶 => {console.log("拿到奶茶：", 奶茶); // 做成功时执行 → 拿到「芋泥波波奶茶」}).catch(错误原因 => {console.log("做砸了：", 错误原因); // 做失败时执行 → 拿到「芋泥没有了」});

3. 每个 “单子” 都有独立记录

  • 订单独立：每个 new Promise 都是独立订单，互不干扰。比如同时点两杯奶茶（两个 Promise ），它们的制作状态、结果会各自记录，不会串单。
  • 状态不可逆：订单一旦变成「已完成」或「已失败」，状态就固定了（比如做好的奶茶不会突然变成做错，做错的也没法反悔 ）。对应 Promise 的状态一旦从 pending 变 fulfilled/rejected，就不会再变。

4. 和 “事件监听” 的区别

虽然都有 “监听反馈”，但 Promise 更简单直接：

  • 事件监听（比如 addEventListener）：可以反复触发（比如按钮点一次，监听函数执行一次；再点，又执行 ），适合 “重复发生的事”（点击、输入 ）。
  • Promise：只触发一次（订单只完成 / 失败一次 ），适合 “一次性的异步结果”（比如网络请求、定时器 ）。

一句话总结

Promise 就像 “带状态追踪的一次性订单”：

  • 发起异步操作 = 下单，生成独立 “订单（Promise 对象）”；
  • resolve/reject = 标记订单结果（完成 / 失败）；
  • .then()/.catch() = 订阅订单结果的 “通知”，拿到结果后做后续操作。

每个 Promise 都像独立的 “单子”，记录自己的状态和结果，保证异步操作的反馈清晰、不混乱～ 这样理解后，再看代码里的 Promise 链式调用、错误捕获，就会觉得和 “订单流程” 完全对应啦！

11 Promise 链式调用与错误捕获

这是一道 Promise 链式调用与错误捕获 的练习题，核心考察你对 Promise 的 .then() 链式调用、.catch() 错误捕获时机的理解，拆解一下：

1. 代码逻辑梳理

  • 前提：promise 是一个会 reject（失败）的 Promise（比如网络错误 ）。
  • 函数 f 的逻辑：
    对 promise 做链式调用：

    js

    promise.then(val => console.log("a"))  // ① 第一个 then.then(val => console.log("b"))  // ② 第二个 then.catch(err => console.log("error!")); // ③ catch 捕获错误

2. 关键：Promise 失败时，链式调用如何执行？

  • 因为 promise 一开始就 reject（失败），所以：
    • 第一个 .then(val => console.log("a")) 不会执行（只有 Promise 成功时才会走 .then ）；
    • 错误会 “跳过” 前面的 .then，直接触发 最近的 .catch 。

3. 执行结果推导

  • 由于 promise 一开始就 reject，所以：
    • ① 和 ② 的 .then 都不执行（不会打印 a、b ）；
    • 直接走到 ③ 的 .catch，打印 error! 。

4. 答案

最终只会打印 error! ，对应选项里的 “error!” 。

（本质是理解：Promise 一旦 reject，错误会在链式调用中 “冒泡”，跳过未执行的 .then，直到被 .catch 捕获 ）

 

http://www.xdnf.cn/news/1239841.html

相关文章：

  • 移动前后端全栈项目
  • 小迪安全v2023学习笔记（五十一讲）—— 持续更新中
  • Nexus配置npm私有仓库
  • Java项目：基于SSM框架实现的商铺租赁管理系统【ssm+B/S架构+源码+数据库+毕业论文+开题报告+任务书+远程部署】
  • LLM大模型开发-SpringAI：ChatClient、Ollama、Advisor
  • io_destroy系统调用及示例
  • 基于 LangChain + 通义千问 + bge-large 中文 Embedding 搭建一个RAG问答示例
  • FastAPI入门：安全性
  • 第12届蓝桥杯Scratch图形化【省赛】初级组 2021年4月24日
  • MySQL学习之MVCC多版本并发控制
  • python常用数据类型
  • 13.Redis 的级联复制
  • 03.一键编译安装Redis脚本
  • sqli-labs：Less-23关卡详细解析
  • 【运维基础】Linux 硬盘分区管理
  • 数据集相关类代码回顾理解 | StratifiedShuffleSplit\transforms.ToTensor\Counter
  • Corrosion2靶机练习笔记
  • 选择排序原理与C语言实现详解
  • 第15届蓝桥杯Scratch图形化国赛初/中级组2024年9月7日真题
  • 【LeetCode刷题指南】--对称二叉树，另一颗树的子树
  • 【量化交易】日内交易有效特征因子
  • Socket编程——TCP协议
  • 智慧社区（六）——社区居民人脸识别功能实现详解：从腾讯 API 集成到模拟验证
  • CMake 命令行参数完全指南（2）
  • C++入门自学Day5-- C/C++内存管理（续）
  • 控制建模matlab练习08：根轨迹
  • 【图像处理基石】如何使用deepseek进行图像质量的分析？
  • pycharm上如何添加conda环境
  • 当Windows远程桌面出现“身份验证错误。要求的函数不受支持”的问题
  • [硬件电路-150]：数字电路 - 数字电路与模拟电路的异同