前端防御性编程

一个页面在呈现给用户之前需要经过静态资源加载、后端接口请求和渲染这三个过程，我们要做的就是在各个过程中防御可能出现的异常情况，保持流畅的用户体验，同时还要应对来自外部的攻击。

防网络

目前主流的研发模式都是前后端分离，拿React举例来说

functionApp(){const[data, setData] = useState(null); useEffect(()=>{ (async() => {constdata =awaitrequest(); setData(data); })(); });if(!data)returnnull;return(

Hello {data.name}
);}复制代码
网络较差数据返回慢，页面不渲染，一直展示空白页，体验很差，一般我们会加个过渡变成这样：

functionApp(){ … if (!data)return; …}复制代码

查看demo：CodeSandbox

这个能解决数据返回之前页面白屏的问题，但是忽略了静态资源加载的时长，这段时间页面还是处于白屏的状态，所以在加载静态资源之前也应该有个过渡效果，试着修改上面的例子：

首页 .loading {

  ...

}

复制代码

查看demo：CodeSandbox

先加载loading片段，再加载资源，看起来解决了整体的过渡问题，但是大家仔细观察会发现动画播放了一会又重新开始了，破碎感比较严重，原因相信大家也比较清楚，React重新渲染了loading的节点，所以在数据回来前，不应该让React接管页面，试着再次改造：

/* render.js /importReactfrom"react";importReactDOMfrom"react-dom";exportdefaultfunctionrender(Component, props){constrootElement =document.getElementById(“root”); ReactDOM.render(, rootElement);}/ index.js */import render from “./render”;import request from “./request”;import App from “./App”;(async () => { const data = await request(); render(App, { data });})();复制代码

查看demo：CodeSandbox

在页面内容呈现给用户之前，会一直保持loading动画的效果，避免因网络原因造成用户体验的中断。

防接口

静态资源加载完成之后，我们开始和后端进行通信获取页面数据，首先我们需要处理以下几种可能异常的情况。

超时

一个网页从访问到呈现出来，用户能容忍的等待时间大概是3_{5s，在除去静态资源加载的时间大概1}2s左右，接口请求应该在3s内返回结果。

如果碰到用户网络较差，而我们又没有设置接口超时，页面会一