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"}
})
相关推荐
同志327131 小时前
用HTML+CSS做了一个网易云音乐客户端首页
前端·css
小猪欧巴哟1 小时前
pnpm install 安装项目依赖遇到 illegal operation on a directory, symlink 问题
前端·vue.js
独角仙梦境1 小时前
🚀🚀🚀学习这个思路,你也能手撸自己的专属vip脚手架🚀🚀🚀
前端
CJWbiu1 小时前
Github Action + docker 实现自动化部署
前端·自动化运维
关山1 小时前
在TS中如何在子进程中动态实例化一个类
前端
吃瓜群众i1 小时前
兼容IE8浏览器的8个实用知识点
前端·javascript
前端烨1 小时前
vue3子传父——v-model辅助值传递
前端·vue3·组件传值
Mintopia2 小时前
Three.js 在数字孪生中的应用场景教学
前端·javascript·three.js
夕水2 小时前
自动化按需导入组件库的工具rust版本完成开源了
前端·rust·trae
JarvanMo3 小时前
借助FlutterFire CLI实现Flutter与Firebase的多环境配置
前端·flutter