ES2020新特性

2020-04-04  本文已影响0人  小啊美
  1. 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';
}))
})
  1. 可选链
    日常代码:
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}级` ?? '暂无等级';
  1. dynamic-import(按需引入)
    按需加载,为了首屏加载更快,比如懒加载图片等
el.onclick = () => {
  import(`/path/index.js`)
  .then(module => {
      module.doSomthing()
   })
  .catch(err => {
    // load error
  })
}
上一篇下一篇

猜你喜欢

热点阅读