0429 手打基础丸

手打基础丸 🧆 => 精选基础知识,经过多道工序精心制作而成,口感鲜嫩多汁。一口咬下,香气四溢,加上传统前端风味,令人回味无穷...... 助力食用者厚积薄发,夯实根基进阶上层。

Promise?

是ES6新增的一个处理异步操作的对象,支持链式调用避免回调地狱。同时新增的async/await是Promise的语法糖。

Promise状态:Pending(待定,初始状态),Fullfiled(操作成功),Rejected(操作失败)

javascript 复制代码
const promise = new Promise((resolve, reject)=>{})
promise.then(result => {
// 使用then进行函数回调
 console.log(result)
}).catch(error => {
// 需要手动处理异常
  console.log(error)
}).finally(()=>{
//无论失败还是成功都会执行的部分
  console.log('操作完成')
})

JS中异步编程方式?

回调函数:将函数作为参数传递给另一个函数,多层嵌套即回调地狱

Promise:链式处理函数回调,避免了回调地狱

async/await:Promise的语法糖,增加了可读性

事件监听:处理用户交互和网络请求等异步事件

定时函数:setTimeout、setInterval,会受事件循环影响

Promise.all和Promise.allsettled区别?

Promise.all

并行执行多个Promise

如果有一个Promise失败则进行立即返回失败的promise,如果都成功则最终返回一个包含所有成功个结果的数组。

javascript 复制代码
const promise1 = Promise.resolve('promise1')
const promise2 = 22
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'promise3')
})
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values)// ["promise1", 22,  'promise' ]
})

Promise.allSettled

并行执行多个Promise

每次Promise无论成功还是失败都会返回一个Promise,包含Promise的状态和结果。

javascript 复制代码
const promise4 = new Promise((resolve, reject) => {setTimeout(reject, 500, "rejectPromise4")})
Promise.all([promise1, promise3, promise4]).then((values) => {
values.forEach((value) =>console.log(values))
// {status: "fullfilled", value: "promise1"}
// {status: "fullfiled", value: "foo"}
// {status: "rejected", reason: "rejectPromise4"}
})
相关推荐
程序员清洒3 小时前
Flutter for OpenHarmony:GridView — 网格布局实现
android·前端·学习·flutter·华为
VX:Fegn08953 小时前
计算机毕业设计|基于ssm + vue超市管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·课程设计
0思必得03 小时前
[Web自动化] 反爬虫
前端·爬虫·python·selenium·自动化
LawrenceLan3 小时前
Flutter 零基础入门(二十六):StatefulWidget 与状态更新 setState
开发语言·前端·flutter·dart
秋秋小事4 小时前
TypeScript 模版字面量与类型操作
前端·typescript
2401_892000524 小时前
Flutter for OpenHarmony 猫咪管家App实战 - 添加提醒实现
前端·javascript·flutter
Yolanda944 小时前
【项目经验】vue h5移动端禁止缩放
前端·javascript·vue.js
广州华水科技5 小时前
单北斗GNSS形变监测一体机在基础设施安全中的应用与技术优势
前端
EndingCoder5 小时前
案例研究:从 JavaScript 迁移到 TypeScript
开发语言·前端·javascript·性能优化·typescript
阿珊和她的猫7 小时前
React 路由:构建单页面应用的导航系统
前端·react.js·状态模式