浅谈async，await，与promise的区别

最新推荐文章于 2024-11-04 14:35:19 发布
最新推荐文章于 2024-11-04 14:35:19 发布
阅读量384 收藏 9
点赞数 9
分类专栏： 前端-js 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61768030/article/details/135467315
版权
本文讨论了JavaScript中处理异步请求的两种方式：Promise和ES6/ES8的async/await。async/await是Promise的语法糖，提供更简洁、可读的代码结构，通过try-catch处理结果，异步代码更接近同步。async函数在await处暂停执行，直到Promise决议，相比链式then/catch，维护性更高。
摘要由CSDN通过智能技术生成

是什么

都是处理异步请求的方式，promise是ES6提出的，async，await是ES8提出的，后者是前者的一个语法糖

相关性

async，await是基于promise实现的，二者都是非阻塞性的

区别

  1. async，await使得代码更简洁，更易读懂，promise是通过then，catch去捕获和处理成功和失败的结果，这种链式结构的写法容易造成代码重叠，不好维护，而async，await是通过try，catch去捕获和处理成功和失败的结果，更干净简洁，可读性高。
  2. async，await使得异步代码同步化， 前者，遇到await，就会等结果返回再执行下面的代码，如果promise返回reject，则整个async会中断，后面代码不执行。后者，promise中，.then方法返回，会出现请求还没有返回，就执行了后面的操作。
op冲鸭！
关注
专栏目录
浅谈promise、async和await
touzhu11的博客
09-15 352
浅谈promise
Async/Await中的resolve和reject怎么用？
小郭的博客
03-18 3693
Async/Await中的resolve和reject怎么用？ 我们在返回新的Promise的时候可以在param里面声明resolve和reject，resolve代表成功的情况，reject代表失败的情况 resolve的情况 如果我们用try catch去抓的时候，resolve会顺利通过，并执行await getData()后面的代码 function getData(){ console.log("fetch...") return new Promise((resolv.
浅谈Promise与async/await的区别
m0_59075169的博客
04-22 516
浅谈Promise与async/await的区别
浅谈promise和async/await执行顺序
qq_45693448的博客
06-10 743
下面来看一个最简单的例子，这个期约在超时之后会解决为一个值： 这个期约在 1000 毫秒之后解决为数值 7。如果程序中的其他代码要在这个值可用时访问它，则需要 写一个解决处理程序： 这其实是很不方便的，因为其他代码都必须塞到期约处理程序中。不过可以把处理程序定义为一个函数： 这个改进其实也不大。这是因为任何需要访问这个期约所产生值的代码，都需要以处理程序的形式 来接收这个值。也就是说，代码照样还是要放到处理程序里。 async/await 旨在解决利用异步结构组织代码的问题。为此， ECMAScript 对
浅谈async函数await用法
Raymon、浅忆。
07-28 1562
async和await相信大家应该不陌生，让异步处理变得更友好。 其实这玩意儿就是个Generator的语法糖，想深入学习得去看看Generator，不然你可能只停留在会用的阶段。 用法很简单，看代码吧。 // 先声明一个函数，这个函数返回一个promise, 先记住哈！后面很多地方要用 function getPromise(str = 'sucess') { return new Promise((resolve) => { setTimeout(() => resolv
浅谈async、await 实现原理
WEBYANGxw的博客
12-20 1835
浅谈async、await 实现原理
浅谈 async/await 和生成器
weixin_46015333的博客
11-17 793
本文详细介绍了 async/await 起源、如何使用、有何特点、注意事项，后来有介绍了一下 JS 中生成器的特点与作用，最后利用生成器的特点实现了一个简单的async/await。
解决async/await中promise返回reject报错的问题，浅谈js异常捕获的历程
热门推荐
codingWeb的博客
07-26 2万+
javascript我觉得印象深刻的两大特点，单线程和异步，单线程不说了，今天来说下异步吧，这星期我碰到的一个问题，这是我以前没有留意到的，异步编程步步都是坑，正常的思维方式应该是同步的，而异步思维没经过训练，很容易犯错，我想啊，promise用async，await优化，不仅是为了更优雅的书写，和阅读，通过优化把异步代码写成同步，也是为了更加符合人正常的思维方式 正常的异常捕获： try { throw new Error(3) } catch(e) { console.log(e)
浅谈async/await
weixin_37989623的博客
10-19 300
背景 ES7提出的async/await是JavaScript为了解决异步问题而提出的一种解决方案，没有更多的回调，许多人将其称为异步的终极解决方案。async函数是Generator函数的语法糖。使用关键字async表示，在函数内部使用await表示异步。JavaScript的发展也经历了回调、Promise、async/await三个阶段，该文章写了我自己对于async/await的理解。不...
浅谈js promise看这篇足够了
10-18
JavaScript中的Promise对象是ES6引入的一种处理异步操作的新机制，它解决了...随着Promise的广泛应用，ES7的`async/await`语法进一步简化了Promise的使用，但其底层依然依赖于Promise，因此理解Promise的基础至关重要。
浅谈Jquery中Ajax异步请求中的async参数的作用
11-24
在JavaScript的世界里，jQuery库极大地简化了与服务器端交互的过程，特别是通过Ajax技术进行异步数据...同时，对于可能需要等待Ajax完成后再进行的操作，可以考虑使用Promise或者async/await来实现更优雅的异步控制流。
javaScript浅谈----async&&await
小王的技术库
01-06 505
是 ES7 的标准，Promise是 ES6 标准，这套 API 也是用来帮助我们写异步代码的，它是构建在Promise之上的。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 377
关于react hooks的一些知识与应用
Three.js简化 WebGL 的使用
weixin_44719499的博客
11-03 773
Three.js 是一个流行的 JavaScript 库，旨在简化 WebGL 的使用，使开发者能够轻松创建和渲染 3D 图形。它提供了丰富的功能和工具，适合游戏开发、数据可视化和互动应用等。
做一个能适配「手机」的网站需要注意什么
illidri的博客
11-01 275
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
js操作数组的方法 / js操作字符串的方法
m0_64520392的博客
11-01 545
js操作数组的方法 / js操作字符串的方法
前端 常见开发工具使用
weixin_45534301的博客
10-31 474
【代码】前端 常见开发工具使用。
Vue 自定义icon组件封装SVG图标
最新发布
gaowxx的博客
11-04 131
通过自定义子组件CustomIcon.vue使用SVG图标，相比iconfont下载文件重新替换更节省时间
Google Recaptcha V2 简单使用
吴家健ken的博客
10-30 304
Google Recaptcha V2 简单使用
async await 与promise
11-27
async/await和Promise都是JavaScript中处理异步编程的方式，但是它们有一些不同之处。 Promise是一种异步编程的解决方案，它可以将异步操作封装成一个Promise对象，通过链式调用then()和catch()方法来处理异步操作的结果或错误。Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。 async/await是ES2017引入的异步编程解决方案，它可以让异步代码看起来像同步代码，使得代码更加易读易懂。async函数是返回一个Promise对象的函数，并且在函数内部可以使用await关键字来等待一个Promise对象的结果。当await关键字后面的Promise对象状态变为fulfilled时，await表达式的值就是Promise对象的resolve值，如果Promise对象状态变为rejected，则会抛出一个错误。 下面是一个使用Promise和async/await实现异步操作的例子： 使用Promise实现异步操作： ```javascript function getData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('data'); }, 1000); }); } getData().then(data => { console.log(data); // 输出：data }).catch(error => { console.log(error); }); ``` 使用async/await实现异步操作： ```javascript async function getData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('data'); }, 1000); }); } async function main() { try { const data = await getData(); console.log(data); // 输出：data } catch (error) { console.log(error); } } main(); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值