ES2020新特性
2020-04-04 本文已影响0人
小啊美
- Promise.allSettled
优势: 在并发任务重,任务异常或者正常,都会返回对应的状态(fulfilled 或者 rejected)和结果(业务value或者拒绝原因reason),在then里通过过滤来得到想要的业务逻辑,最大限度的保障业务当前状态的可访问性。它的出现是解决 Promise.all的问题(如果某个任务出现异常reject,所有任务都会挂掉,Promise直接进入reject状态)
Promise.allSettled([
Promise.reject({code: 500, msg: '异常'}),
Promise.resolve({code: 200,data: []}),
Promise.resolve({code: 200,data:[}),
]).then(ret => {
/*
0: { status: 'rejected', reason:{} }
1: { status: 'fulfilled', value:{} }
2: { status: 'fulfilled', value:{} }
*/
// 过滤掉rejected状态,尽可能多的保证页面区域数据渲染
renderContent(ret.filter(el => {
return el.status !== 'rejected';
}))
})
- 可选链
日常代码:
var name = user && user.info && user.info.name
使用可选链:
var name = user?.info?.name
var age = user?.info?.getAge?.()
3.空值合并运算符
日常写法:
var name = (user.data && user.data.name) || '小明'
使用空值合并运算符:
var name = `${user.name}级` ?? '暂无等级';
- dynamic-import(按需引入)
按需加载,为了首屏加载更快,比如懒加载图片等
el.onclick = () => {
import(`/path/index.js`)
.then(module => {
module.doSomthing()
})
.catch(err => {
// load error
})
}