JavaScript--明明白白Promise (Park One)

明明白白Promise (Park One)

Promise是一种用于处理异步操作的特殊对象。它代表了一个尚未完成但最终会完成的操作,并可以在操作完成后返回结果或错误。

Promise有三种状态:pending(进行中)、fulfilled(已完成)和rejected(已拒绝)。当一个Promise被创建时,它处于pending状态。操作可以是异步的,当操作成功完成时,Promise将转为fulfilled状态,并提供相应的结果。相反,如果操作失败,则Promise将转为rejected状态,并提供错误的原因。

使用Promise,可以通过链式调用then()方法来处理异步操作的结果。then()方法接受两个回调函数作为参数:一个用于处理操作成功完成时的结果,另一个用于处理操作被拒绝时的错误。这种链式调用的方式使得代码更加清晰和易于维护。

除了then()方法,Promise还提供了其他方法,如catch()用于捕获错误,finally()用于指定无论Promise状态如何都要执行的操作。

Promise的出现使得JavaScript中的异步编程更加优雅和可读,避免了回调地狱(callback hell)的问题。它已经成为现代JavaScript中处理异步操作的一种标准方式。

Promise 在各种开源库中已经实现,现在标准化后被浏览器默认支持。

传统实现,代码会陷入回调地狱的例子:

function getUser(userId, callback) {// 异步操作获取用户数据setTimeout(() => {const user = { id: userId, name: 'John' };callback(user);}, 1000);
}function getPosts(user, callback) {// 异步操作获取用户的帖子数据setTimeout(() => {const posts = ['Post 1', 'Post 2', 'Post 3'];callback(posts);}, 1000);
}function getComments(post, callback) {// 异步操作获取帖子的评论数据setTimeout(() => {const comments = ['Comment 1', 'Comment 2', 'Comment 3'];callback(comments);}, 1000);
}getUser(1, (user) => {getPosts(user, (posts) => {getComments(posts[0], (comments) => {console.log(comments);});});
});

我们需要获取用户数据、帖子数据和评论数据。由于这些操作都是异步的,我们使用了多个嵌套的回调函数来处理它们。这样的代码结构难以阅读和维护,尤其是在处理更复杂的异步操作时。

Promise 的优点之一是可以通过链式调用来避免回调地狱问题,使代码结构更加清晰和可读。一个 promise 必须有一个 then 方法用于处理状态改变

Promise 包含pendingfulfilledrejected三种状态

  • pending 指初始等待状态,初始化 promise 时的状态
  • resolve 指已经解决,将 promise 状态设置为fulfilled
  • reject 指拒绝处理,将 promise 状态设置为rejected
  • promise 是生产者,通过 resolvereject 函数告之结果
  • promise 非常适合需要一定执行时间的异步任务

状态一旦改变将不可更改,promise 没有使用 resolvereject 更改状态时,状态为 pending

console.log(new Promise((resolve, reject) => {});
); //Promise {<pending>}

当更改状态后

console.log(new Promise((resolve, reject) => {resolve("fulfilled");})
); //Promise {<resolved>: "fulfilled"}console.log(new Promise((resolve, reject) => {reject("rejected");})
); //Promise {<rejected>: "rejected"}

promise 创建时即立即执行即同步任务,then 会放在异步微任务中执行,需要等同步任务执行后才执行。

let promise = new Promise((resolve, reject) => {resolve("fulfilled");console.log("success");
});
promise.then(msg => {console.log(msg);
});
console.log("ss-s.cc");
promise` 操作都是在其他代码后执行,下面会先输出 `ss-s.cc` 再弹出 `success

promise 的 then、catch、finally 的方法都是异步任务

程序需要将主任务执行完成才会执行异步队列任务

const promise = new Promise(resolve => resolve("success"));
promise.then(alert);
alert("ss-s.cc");
promise.then(() => {alert("success");
});

下例在三秒后将 Promise 状态设置为 fulfilled ,然后执行 then 方法

new Promise((resolve, reject) => {setTimeout(() => {resolve("fulfilled");}, 3000);
}).then(msg => {console.log(msg);},error => {console.log(error);}
);

状态被改变后就不能再修改了,下面先通过resolve 改变为成功状态,表示promise 状态已经完成,就不能使用 reject 更改状态了

new Promise((resolve, reject) => {resolve("操作成功");reject(new Error("请求失败"));
}).then(msg => {console.log(msg);},error => {console.log(error);}
);

动态改变

如果你想在没有使用 Promise 的情况下动态改变异步操作的处理方式,一个可能的方法是使用回调函数作为参数,并在需要改变处理方式时更改回调函数。

function asyncOperation(callback) {setTimeout(() => {const data = 'Async data';callback(data);}, 1000);
}// 初始情况下使用默认的回调函数处理异步操作结果
asyncOperation((result) => {console.log('默认处理方式:', result);
});// 动态改变处理方式,使用新的回调函数处理异步操作结果
const newCallback = (result) => {console.log('新的处理方式:', result.toUpperCase());
};asyncOperation(newCallback);

我们使用默认的回调函数来处理异步操作结果。然后,我们定义了一个新的回调函数 newCallback,它会将结果转换为大写形式。通过将新的回调函数传递给 asyncOperation 函数,我们可以动态地改变处理方式。

使用Promise可以更方便地实现动态改变异步操作的处理方式。

function asyncOperation() {return new Promise((resolve, reject) => {setTimeout(() => {const data = 'Async data';resolve(data);}, 1000);});
}// 初始情况下使用默认的处理方式处理异步操作结果
asyncOperation().then((result) => {console.log('默认处理方式:', result);});// 动态改变处理方式,使用新的处理方式处理异步操作结果
const newHandler = (result) => {console.log('新的处理方式:', result.toUpperCase());
};// 创建一个新的 Promise,并在其上添加新的处理方式
const newPromise = asyncOperation().then(newHandler);// 在新的 Promise 上继续添加其他处理方式
newPromise.then((result) => {console.log('额外的处理方式:', result.length);});

then的介绍及使用方法

什么是then?then() 是 Promise 对象上的方法之一,用于处理 Promise 的成功状态(fulfilled)。它接受两个参数:一个是处理成功状态的回调函数,另一个是处理失败状态(rejected)的回调函数(可选)。

语法:

promise.then(onFulfilled, onRejected)
  • onFulfilled 是一个函数,它会在 Promise 对象被成功解决时调用,并接收解决(fulfilled)状态的值作为参数。这个函数可以处理异步操作的结果,执行其他操作,或者返回一个新的值或 Promise 对象。
  • onRejected 是一个可选的函数,它会在 Promise 对象被拒绝(rejected)时调用,并接收拒绝状态的原因作为参数。这个函数可以处理错误,进行错误处理或返回一个新的错误。

.then() 方法返回一个新的 Promise 对象,可以通过链式调用多个 .then() 方法来串联处理多个异步操作的结果。

const promise = new Promise((resolve, reject) => {setTimeout(() => {const randomNum = Math.random();if (randomNum < 0.5) {resolve(randomNum); // 操作成功完成,返回结果} else {reject(new Error('操作失败')); // 操作被拒绝,返回错误}}, 1000);
});promise.then((result) => {console.log('操作成功:', result);return result * 2; // 返回一个新的值},(error) => {console.log('操作失败:', error);throw new Error('新的错误'); // 抛出一个新的错误}
).then((newResult) => {console.log('新的操作成功:', newResult);},(newError) => {console.log('新的操作失败:', newError);}
);

then的链式调用:

可以在一个 Promise 对象上多次调用 .then() 方法,以便依次处理异步操作的结果。每个 .then() 方法都返回一个新的 Promise 对象,使得你可以在后续的 .then() 方法中继续处理结果,形成一个链式的处理流程。

function asyncOperation() {return new Promise((resolve, reject) => {setTimeout(() => {const data = 'Async data';resolve(data);}, 1000);});
}asyncOperation().then((result) => {console.log('第一个处理步骤:', result);return result.toUpperCase();}).then((result) => {console.log('第二个处理步骤:', result);return result.split(' ');}).then((result) => {console.log('第三个处理步骤:', result);return result.reverse();}).then((result) => {console.log('最终结果:', result);}).catch((error) => {console.log('发生错误:', error);});

注意点:

  1. 返回值传递:.then() 方法可以返回一个值或一个新的 Promise 对象。如果回调函数返回一个值,该值将被包装在一个已解决(fulfilled)状态的 Promise 对象中,并作为下一个 .then() 方法的输入。如果回调函数返回一个 Promise 对象,下一个 .then() 方法将等待该 Promise 对象解决,并将其解决值作为输入。

  2. 异步操作的顺序:.then() 方法是异步的,它们会在 Promise 的解决(fulfilled)状态时被调用,而不会阻塞后续代码的执行。因此,在链式调用中的每个 .then() 方法中的代码可能会在其他 .then() 方法之前或之后执行。确保你理解和处理好异步操作的顺序和依赖关系。

  3. 错误处理:.then() 方法链中的任何一个步骤发生错误时,错误会被传递到后续的 .catch() 方法或链中的下一个 .then() 方法的错误处理回调函数中。使用 .catch() 方法来捕获和处理链式调用中的错误,确保错误被适当地处理和传递。

  4. 异常处理:如果在 .then() 方法中的回调函数中抛出异常(使用 throw 语句),异常会被自动捕获并传递给后续的 .catch() 方法或链中的下一个 .then() 方法的错误处理回调函数中。

  5. 链式调用的返回值:.then() 方法返回一个新的 Promise 对象,它代表了当前 .then() 方法的处理结果。这使得你可以通过链式调用多个 .then() 方法来形成一个处理流程。同时,返回的 Promise 对象可以用于后续的 .then() 方法的调用或错误处理。

  6. 注意 Promise 链的结束:在 .then() 方法链中,确保在链的最后使用 .catch() 方法或 .finally() 方法来处理最终的成功或失败状态,以避免未处理的 Promise 拒绝(rejected)状态导致的未捕获错误。

catch
Promise 对象的 .catch() 方法用于捕获和处理 Promise 链中发生的错误。当 Promise 链中的任何一个 Promise 被拒绝(rejected)时,错误会被传递到 .catch() 方法中进行处理。
.catch() 方法接受一个回调函数作为参数,该回调函数会在 Promise 被拒绝时被调用。回调函数可以接收一个参数,即拒绝的原因(通常是一个 Error 对象),并在该函数中执行错误处理逻辑。

fetch('https://api.example.com/data').then(response => {// 处理响应return response.json();}).then(data => {// 处理数据console.log(data);}).catch(error => {// 处理错误console.error('发生错误:', error);});

如果 fetch() 请求失败或者 .then() 中的任何一个操作抛出异常,错误将被传递到 .catch() 中进行处理。您可以在 .catch() 回调函数中执行适当的错误处理,例如打印错误消息或执行备选操作。

使用 .catch() 方法可以有效地捕获和处理 Promise 链中的错误,确保代码在出现异常情况时具有适当的容错和错误处理机制。

catch 用于失败状态的处理函数,等同于 then(null,reject){}

建议使用 catch 处理错误将 catch 放在最后面用于统一处理前面发生的错误

const promise = new Promise((resolve, reject) => {reject(new Error("Notice: Promise Exception"));
}).catch(msg => {console.error(msg);
});

catch 可以捕获之前所有 promise 的错误,所以建议将 catch 放在最后。下例中 catch 也可以捕获到了第一个 then 返回 的 promise 的错误。

new Promise((resolve, reject) => {resolve();
})
.then(() => {return new Promise((resolve, reject) => {reject(".then ");});
})
.then(() => {})
.catch(msg => {console.log(msg);
});

错误是冒泡的操作的,下面没有任何一个then 定义第二个函数,将一直冒泡到 catch 处理错误

new Promise((resolve, reject) => {reject(new Error("请求失败"));
})
.then(msg => {})
.then(msg => {})
.catch(error => {console.log(error);
});
catch 也可以捕获对 then 抛出的错误处理new Promise((resolve, reject) => {resolve();
})
.then(msg => {throw new Error("这是then 抛出的错误");
})
.catch(() => {console.log("33");
});

也可以捕获其他错误,下面在 then 中使用了未定义的变量,将会把错误抛出到 catch

new Promise((resolve, reject) => {resolve("success");
})
.then(msg => {console.log(a);
})
.catch(reason => {console.log(reason);
});

使用建议
建议将错误要交给catch处理而不是在then中完成,不建议使用下面的方式管理错误

new Promise((resolve, reject) => {reject(new Error("请求失败"));
}).then(msg => {console.log(msg);},error => {console.log(error);}
);

处理机制,在 promise 中抛出的错误也会被catch 捕获

const promise = new Promise((resolve, reject) => {throw new Error("fail");
}).catch(msg => {console.log(msg.toString());
});

注意:可以将上面的理解为如下代码,可以理解为内部自动执行 try…catch

const promise = new Promise((resolve, reject) => {try {throw new Error("fail");} catch (error) {reject(error);}
}).catch(msg => {console.log(msg.toString());
});

但像下面的在异步中 throw 将不会触发 catch,而使用系统错误处理

const promise = new Promise((resolve, reject) => {setTimeout(() => {throw new Error("fail");}, 2000);
}).catch(msg => {console.log(msg);
});

下面在then 方法中使用了没有定义的hd函数,也会抛除到 catch 执行,可以理解为内部自动执行 try…catch

const promise = new Promise((resolve, reject) => {resolve();
})
.then(() => {hd();
})
.catch(msg => {console.log(msg.toString());
});
在 catch 中发生的错误也会抛给最近的错误处理const promise = new Promise((resolve, reject) => {reject();
})
.catch(msg => {hd();
})
.then(null, error => {console.log(error);
});

fanlly的介绍与用法

Promise 对象的 .finally() 方法用于指定不论 Promise 是否成功完成或被拒绝,都要执行的逻辑。无论 Promise 的状态如何,.finally() 方法都会在 Promise 链中的最后执行。

.finally() 方法接受一个回调函数作为参数,该回调函数在 Promise 完成或被拒绝时被调用。它不接收任何参数,因此无法获取 Promise 的结果或拒绝原因,仅用于执行一些清理操作或在 Promise 完成后执行一些必要的逻辑。

fetch('https://api.example.com/data').then(response => {// 处理响应return response.json();}).then(data => {// 处理数据console.log(data);}).catch(error => {// 处理错误console.error('发生错误:', error);}).finally(() => {// 执行清理操作或其他逻辑console.log('完成处理');});

注意:无论状态是resolve 或 reject 都会执行此动作,finally 与状态无关。

图片加载的综合例子:


function loadImage(url) {return new Promise((resolve, reject) => {const img = new Image();img.onload = function() {resolve(img);};img.onerror = function() {reject(new Error('图片加载失败'));};img.src = url;});
}function displayImage(image) {const container = document.getElementById('image-container');container.appendChild(image);
}function handleImageLoad(url) {loadImage(url).then(image => {displayImage(image);}).catch(error => {console.error('加载图片出错:', error);}).finally(() => {console.log('清理工作完成');});
}// 调用示例
const imageUrl = 'https://example.com/image.jpg';
handleImageLoad(imageUrl);

首先定义了 loadImage() 函数,它接受一个图片的URL作为参数,并返回一个 Promise 对象。在 Promise 的构造函数中,我们创建一个新的 Image 对象,并设置其 onload 和 onerror 事件处理程序。当图片加载成功时,我们调用 resolve() 方法,将加载的图片对象传递给 .then() 方法。当图片加载失败时,我们调用 reject() 方法,将一个错误对象传递给 .catch() 方法。

在 handleImageLoad() 函数中,我们调用 loadImage() 函数来加载图片,并使用 .then() 方法来处理加载成功的情况。在 .then() 方法的回调函数中,我们调用 displayImage() 函数来显示加载的图片。如果加载出现错误,我们使用 .catch() 方法来处理错误情况。无论加载成功还是失败,我们都使用 .finally() 方法来进行清理工作。

欢迎点赞,关注! 谢谢!

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

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

相关文章

华为设备命令行操作基础

熟悉VRP命令行并且熟练掌握VRP配置是高效管理华为网络设备的必备基础。 设备初始化启动 管理员和工程师如果要访问在通用路由平台VRP上运行的华为产品&#xff0c;首先要进入启动程序。开机界面信息提供了系统启动的运行程序和正在运行的VRP版本及其加载路径。启动完成以后&am…

鸿蒙-ArkUI 常用布局容器对齐方式

概念 主轴&#xff1a;在布局容器中&#xff0c;默认存在两根轴&#xff0c;分别是主轴和交叉轴&#xff0c;不同的容器中主轴的方向不一样的。 在Column容器中主轴的方向是垂直方向。在Row容器中主轴的方向是水平方向。在Flex容器中可以通过direction参数设置主轴的方向&…

MySQL数据库 触发器

目录 触发器概述 语法 案例 触发器概述 触发器是与表有关的数据库对象&#xff0c;指在insert/update/delete之前(BEFORE)或之后(AFTER)&#xff0c;触发并执行触发器中定义的soL语句集合。触发器的这种特性可以协助应用在数据库端确保数据的完整性&#xff0c;日志记录&am…

Copilot助力Python代码编程的案例分享与总结

Copilot是GitHub推出的一款AI编程助手&#xff0c;它能够根据你编写的代码和注释自动生成代码片段或完整的函数。以下是我使用Copilot进行Python编程的一些经验分享以及多个代码示例&#xff1a; 1.快速生成基础代码结构&#xff1a; 当你需要创建一个新的Python文件并初始化一…

分布式搜索elasticsearch概念

什么是elasticsearch&#xff1f; elasticsearch是一款非常强大的开源搜索引擎&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 目录 elasticsearch的场景 elasticsearch的发展 Lucene篇 Elasticsearch篇 elasticsearch的安装 elasticsearch的场景 elasticsear…

【SpringMVC】REST(Representation State Transfer)ful开发

REST全称Representation State Transfer&#xff0c;表现形式状态转换 文章目录 1. 为什么提出了REST&#xff1f;2. RESTful入门案例案例代码修改请求方式修改成RESTful风格&#xff0c;并以POST方式提交 RESTful格式下传参RESTful入门案例总结RequestBody&#xff0c;Reques…

Linux下编写zlg7290驱动(3)-键盘驱动编写

2.3. 数据处理实现 执行上述代码后系统中就注册了我们的input设备&#xff0c;接下来我们要做的是活得键盘的键值&#xff0c;zlg7290多可以支持64个按键&#xff0c;每个按键按下后都会产生一个中断&#xff0c;我们写驱动是可以使用轮询不断检测是否有按键也可以触发中断来判…

云原生之深入解析基于FunctionGraph在Serverless领域的FinOps的探索和实践

一、背景 Serverless 精确到毫秒级的按用付费模式使得用户不再需要为资源的空闲时间付费。然而&#xff0c;对于给定的某个应用函数&#xff0c;由于影响其计费成本的因素并不唯一&#xff0c;使得用户对函数运行期间的总计费进行精确的事先估计变成了一项困难的工作。以传统云…

git分支解析

1、概述和优点 在版本控制过程中&#xff0c;同时会推进多个任务&#xff0c;为此&#xff0c;就可以为每个任务创建单独的分支。开发人员可以把自己的任务和主线任务分离开来&#xff0c;在开发自己的分支的时候不会影响主分支。 分支的好处&#xff1a; 同时推进多个功能开发…

CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem:Webpack5 升级后相关插件和配置更新说明

前言 项目对应的 webpack5 版本如下&#xff1a; npm i webpack5.89.0 -D npm i webpack-cli5.1.4 -D升级插件 说明一下&#xff0c;我更喜欢固定版本号&#xff0c;这样随机bug会少很多&#xff0c;更可控~ npm i postcss-loader6.1.1 -D npm i postcss-pxtorem6.0.0 -D配…

Postman创建及删除workspace工作空间

文章目录 一、Postman创建workspace工作空间二、Postman删除workspace工作空间 一、Postman创建workspace工作空间 打开Postman 点击 Workspaces → Create Workspaces 如图所示操作 工作空间创建完成 二、Postman删除workspace工作空间 点击 Workspaces → 选择要删除…

35.java后端面试宝典

一、自我介绍。 我叫什么&#xff0c;这次是应聘什么岗位&#xff0c;会什么技术&#xff0c;会什么框架&#xff0c;熟练掌握框架之间的整合技术&#xff0c;做过什么项目并且介绍主要做了什么&#xff0c;并且可以为公司带来什么价值。 总的来说&#xff0c;初级Java工程师岗…

vue 项目 index.html 中使用环境变量

目录 1&#xff0c;Vue-CLI&#xff08;Webpack&#xff09;2&#xff0c;Vite 1&#xff0c;Vue-CLI&#xff08;Webpack&#xff09; <!DOCTYPE html> <html lang""><head><link rel"icon" href"<% BASE_URL %>favicon…

Milvus数据一致性介绍及选择方法

1、Milvus 时钟机制 Milvus 通过时间戳水印来保障读链路的一致性&#xff0c;如下图所示&#xff0c;在往消息队列插入数据时&#xff0c; Milvus 不光会为这些插入记录打上时间戳&#xff0c;还会不间断地插入同步时间戳&#xff0c;以图中同步时间戳 syncTs1 为例&#xff0…

uniapp使用colorUI

colorUI 微动画 | ColorUI 使用文档 1&#xff1a;把colorui里三个文件复制到自己项目中去 App.vue </script> <style> import url(colorui/icon.css); import url(colorui/main.css); import url("colorui/animation.css");-webkit-keyframes show {…

Struts2 S2-061 远程命令执行漏洞(CVE-2020-17530)复现

漏洞简介 Struts2框架是一个用于开发Java EE网络应用程序的开放源代码网页应用程序架构。它利用并延伸了Java Servlet API&#xff0c;鼓励开发者采用MVC架构。Struts2以WebWork优秀的设计思想为核心&#xff0c;吸收了Struts框架的部分优点&#xff0c;提供了一个更加整洁的MV…

GIT 常用命令整理

一、暂存文件 1. 添加指定文件到暂存区&#xff1a;git add [file1] [file2] ... 2. 添加指定目录到暂存区&#xff0c;包括子目录&#xff1a;git add [dir] 3. 添加当前目录的所有文件到暂存区&#xff1a;git add . 4. 添加每个变化前&#xff0c;都会要求确认&#x…

心有暖阳,笃定前行,2024考研加油

2024考研学子&#xff0c;所有的付出终有收获&#xff0c;阳光终将穿透阴霾&#xff0c;终将上岸。 当曙光破晓的时候&#xff0c;你可曾记得那些星月为伴&#xff0c;孤独为友&#xff0c;理想为灯来指引前行之路的日子&#xff0c;那些默默扎根的日子终将化作星星在未来闪闪发…

力扣55. 跳跃游戏

贪心算法 思路&#xff1a; 当前所在位置 pos&#xff0c;能够到达的最远位置为 pos nums[pos]&#xff1b;如果最远位置能到达边界即能够跳出圈&#xff1a; if (rightmost > size - 1) { return true; } 在能跳跃范围内&#xff08;idx < rightmost&#xff09;更新能…

Java项目-瑞吉外卖项目优化Day3

前后端分离开发 Yapi 是一个接口结合了接口测试、接口管理的管理平台&#xff0c;需要配置比较麻烦。看弹幕说用apifox更好用。可以将接口文档导出导入。 Swagger 注意下面的地址前面要有/。 效果&#xff1a; 可以在这里实现接口的测试&#xff0c;也可以导出文档等等。一般…