javascript 使用Fetch实现Lazy

Posted 2021-05-03

const NetworkAware = ({init,...props}) => {
  return init ? <div>ONLINE {init.data}</div> : <div>OFFLINE</div>
}
const prefetch => data => Wrapped => props => {
return (<Wrapped {...props} {...data}/>)
}

const LazyComp = React.lazy(async () => {
const {default:_Component} =  await import('./NetworkAware')
try {
const response = await fetch('api.somesite.com')
return {default: prefetch({init:response.json()})(_Component) }
} catch(err) {
  return {default:_Component}
}
})