巩义便宜网站建设价格,广东手机网站建设报价表,wordpress导入,商标注册45类明细大家好#xff0c;我是若川#xff0c;点此加我微信进源码群#xff0c;一起学习源码。还可以进《剑指前端offer》交流群。另外#xff0c;可以进群免费看下周六Vue专场直播#xff0c;有尤雨溪分享「Vue3 生态现状以及展望」如果你还是一个 JavaScript 初学者#xff0c… 大家好我是若川点此加我微信进源码群一起学习源码。还可以进《剑指前端offer》交流群。另外可以进群免费看下周六Vue专场直播有尤雨溪分享「Vue3 生态现状以及展望」如果你还是一个 JavaScript 初学者你可能要纠结一下 Promise 到底是什么。最近我发了一条动态描述了这个问题我被大家的反馈震惊到了。所以我决定写一篇关于 Promise 的教程。我看过很多关于 Promise 的文章但大部分教程都没有通过类比的方式解释清楚 Promise 到底是什么。初学者搞不懂 Promise 的根本原因是他们不知道 Promise 是做什么的以及如何在简单和复杂的场景中使用它。因此在这篇教程中我将通过一个小故事来解释什么是 Promise、Promise 是如何工作的。同时我也会通过一些代码示例来说明在 JavaScript 中如何使用 Promise。什么是 Promise想象一下你准备面试某个公司的前端工程师。你走进面试会场当面试马上要开始时你发现简历忘带了这时你怎么办你没有气馁。因为你很幸运你有一个室友。你马上给室友打电话寻求帮助恳求室友帮你找到简历。你的室友承诺他一旦找到就立马回你消息。假设简历被找到室友给你回复信息“太好了我找到你的简历了”但是如果室友没有找到他就要回复一条失败的信息并解释他为什么没有找到简历。比如他可能给正在面试的你发如下信息“对不起我没有找到你的简历因为你的保险柜钥匙丢了。”与此同时面试还要继续。但面试官并没有拿到真实的简历而是得到一个正在找简历的承诺同时面试官把该简历的状态设置成进行中PENDING。你回答了所有问题。但不幸的是能否得到这个工作还要依赖你简历的最终状态FINAL STATUS。你的室友终于回消息了。正如我们前面讨论过的如果他没有找到简历他就需要发一个失败的信息并解释为什么没有找到。如果是这种情况面试结束你被拒绝Rejected了。如果室友找到了简历他会很高兴的告诉你他找到了而你将继续面试并获得FULFILL这份工作。如何把上述过程翻译成 JS 代码室友承诺找简历并回复信息的过程等同于我们在 JavaScript 中定义一个 Promise。定义 Promise 并不能直接或立即获得返回值而是返回一个 Promise 对象。这个 Promise 对象在一段时间后会接收返回值。Promise 对象是异步的这就意味着程序需要花点时间才能获得结果。这和找简历是一样的都需要花点时间去找。基于这个原因在找的这个时间里面试官并不是什么都没做而是基于简历一会儿就找到的承诺他们依然开始面试候选人。在这个场景里我们用简历一会儿就找到的承诺替换了真实的简历。同理JS 引擎也并不是等着什么也不做而是继续执行后续代码并将返回的Promise对象状态设置为 Pending。回复信息包含是否找到简历的状态信息。对于Promise对象来说回复信息被称作返回值。如果回复信息是 “success”我们将录取候选人。如果是 “failure”我们不录取该候选人。在 Promise 中我们通过回调函数处理Promise的返回值。这些处理函数定义在then()方法中。为了指定如何调用回调函数需要使用以下两个方法resolve(value): 表明 Promise 任务成功调用then()的成功回调函数。reject(error): 表明 Promise 任务失败调用then()的错误回调函数。如果 Promise 成功则调用成功回调如果失败调用失败回调。在异步任务完成之前Promise 只是一个占位符。当你定义了一个 Promise你并不会立即获得返回值而是获得一个 Promise 对象。如何在 JavaScript 中使用 Promise你可以通过Promise类定义一个 Promise 对象。const myPromise new Promise((resolve, reject) {setTimeout(() {resolve(this is the eventual value the promise will return);}, 3000);
});console.log(myPromise);示例 1在控制台运行将返回一个Promise对象除了通过构造函数声明一个 Promise 对象外还可以使用 Promise 内置的 API 进行声明const anotherPromise Promise.resolve(this is the eventual value the promise will return)console.log(anotherPromise);示例 2示例 1 中的 Promise 等待 3s 后获取到成功返回的信息this is the eventual...而示例 2 中将立即获取到成功返回的信息。JavaScript Promise 中的错误处理Promise 对象也能被_rejected_。大多数时候rejected 的发生是因为执行异步任务的时候抛出了错误此时就会调用reject()方法。下面的示例展示了一个 Promise 对象是如何执行 reject 方法的:const myPromise new Promise((resolve, reject) {let a false;setTimeout(() {return (a) ? resolve(a is found!): reject(sorry, no a);}, 3000);
});示例 3你能想到 Promise 被 rejected 的原因吗如果你的答案是a的值是 false那么恭喜你答对了。在示例 3 中代码执行 3s 后将调用 reject 方法因为(a)?表达式的值是 false所以触发reject方法。Promise 的链式调用当 Promise 返回了某个值通常你都会对返回值进行处理。比如你发送了一个网络请求你期望获取数据并展示在页面上。你可以定义两个回调函数当 Promise 返回成功或失败时进行回调。这两个回调函数定义在then()内const anotherPromise new Promise((resolve, reject) {setTimeout(() {resolve(this is the eventual value the promise will return);}, 3000);
});// CONTINUATION
anotherPromise
.then(value { console.log(value) })示例 4示例 4 的代码在 3s 后返回成功信息原则上你可以无限链式调用调用链会依次执行而且前一个 then 的返回值作为参数传入后一个 then。const anotherPromise new Promise((resolve, reject) {setTimeout(() {resolve(this is the eventual value the promise will return);}, 3000);
});anotherPromise
.then(fulfillFn, rejectFn)
.then(fulfilFn, rejectFn)
.then(value { console.log(value) })示例 5但我们还是遗漏了重要的内容。要时刻记住then()方法必须有两个回调函数第一个参数是成功回调第二个参数是错误回调。在示例 4 和示例 5 中都没有传入第二个回调函数。因此如果代码报错就没有错误回调捕获错误信息。如果你执意要在then()中只定义一个回调函数即成功回调那么你就需要在 Promise 调用链的末端调用catch()方法捕获任何可能的报错信息。如何在 JS 中使用catch()方法在 Promise 调用链上无论哪个环节报错catch()方法都会被调用。const myPromise new Promise((resolve, reject) {let a false;setTimeout(() {return (a) ? resolve(a is found!): reject(sorry, no a);}, 3000);
}); myPromise
.then(value { console.log(value) })
.catch(err { console.log(err) });示例 6因为myPromise最终状态是 rejectedthen()方法中的成功回调被忽略。而catch()方法中的错误回调被执行并在控制台打印如下错误信息写在最后JavaScript 中的 Promise 是一个运行异步任务的强大功能。大部分情况下在前端面试时面试官都会问一些关于 Promise 的问题。在这片文章中我已经解释了 Promise 的简单应用场景也通过示例的方式展示了基本用法。希望你能从文章中获取有用的知识。如果你喜欢编程教程点击查看我的博客。我会经常发布一些有关软件开发的文章。再次感谢您的阅读再会。P/S 如果你也在学习 JavaScript我也创建了一个电子书上面有 50 个关于 js 的主题而且都是我亲自手绘的哦。原文链接https://www.freecodecamp.org/news/what-is-promise-in-javascript-for-beginners/作者Kingsley Ubah译者wangzili最后预告福利扫下方二维码加我微信 ruochuan12可以拉你进群免费观看10月23日的前端早早聊 Vue 专场直播大咖云集️更有「尤雨溪」分享「Vue3 生态现状以及展望」。 另外还可以送50个录播视频和PPT~最近组建了一个湖南人的前端交流群如果你是湖南人可以加我微信 ruochuan12 私信 湖南 拉你进群。推荐阅读1个月200人一起读了4周源码我历时3年才写了10余篇源码文章但收获了100w阅读老姚浅谈怎么学JavaScript我在阿里招前端该怎么帮你可进面试群················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时最近组织了源码共读活动识别上方二维码加我微信、拉你进源码共读群今日话题略。欢迎分享、收藏、点赞、在看我的公众号文章~
