关于前端防御性编程，我们可能遇到过大多数情况，后端由于并发请求太多，或者数据量太大，或者服务被异常由于异常，接口请求失败，然后前端出现白屏或者报错。前端自己写的代码有一些缺陷，整个系统不够健壮，所以会出现白屏，或者业务系统异常，用户误操作等，然后就会出现。前端防御性编程常见问题及预防1、最常见的问题：未捕获的TypeError:Cannotreadproperty'c'ofundefined出现这个问题最根本的原因是：当我们将一个对象obj初始化为{}时，obj.a此时，它是未定义的。我们可以通过打印obj.a得到undefined，但是当我们打印obj.a.c时，就会出现上面的错误。js对象中未初始化的属性值为undefined，从undefined中读取属性会出现这个错误（同理，null也是一样）。如何避免？js和ts目前都有可选链的概念，例如：constobj={};console.log(obj?.b?.c?.d)上面的代码不会报错，原因是什么时候？.遇到空值，会返回undefined。2.前端接口层面的错误机制捕获前端接口调用一般比较频繁。这时候我们可以考虑使用单例模式，将所有的axios请求都封装成一个函数。在此函数中调用接口时，Unity可以捕获未知错误。伪代码如下：functionajax(url,data,method='get'){constpromise=axios[method](url,data)returnpromise.then(res=>{}).catch(error){//统一错误处理}}那么只要出现接口调用的未知错误，都会在这里处理。3.错误边界（ErrorBoundaries，当前端出现未知错误时，预设的DefinedUI界面）以React为例，部分UI的JavaScript错误不应该导致整个应用崩溃。为了解决这个问题，React16引入了一个新的概念——错误边界。错误边界是一个React组件，它捕获并打印在其子组件树中任何位置发生的JavaScript错误，并呈现替代UI而不是呈现那些崩溃的子组件树。错误边界在渲染期间、生命周期方法中以及整个组件树的构造函数中捕获错误。用法示例：classErrorBoundaryextendsReact.Component{constructor(props){super(props);this.state={hasError:false};}staticgetDerivedStateFromError(error){//更新状态，以便下一次渲染可以显示降级的UIreturn{hasError:true};}componentDidCatch(error,errorInfo){//也可以将错误日志上报给服务端logErrorToMyService(error,errorInfo);}render(){if(this.state.hasError){//您可以自定义降级的UI并渲染return

Somethingwentwrong.

;}返回this.props.children;}}注意，错误边界不能捕获以下场景产生的错误：事件处理（了解更多）异步代码（如setTimeout或requestAnimationFrame回调函数）服务端渲染本身抛出的错误（不是其子组件）4.导致的错误通过前端复杂的异步场景这个问题可能远不止这么简单，但是路子很简单，按照单向的数据流来改变数据，例如：//test.jsexportconstobj={a:1,b:2}//使用objimport{obj}from'./test.js';obj.a=3;当你频繁使用这个obj对象的时候，你是无法根据代码知道它的变化顺序的（也就是某个时刻它的值是多少），而且里面可能有很多异步代码，当我们改变它的方式时，我们可以知道它的变化顺序，也更方便我们调试。例如：//test.jsexportconstobj={a:1,b:2}exportfunctionsetObj(key,value){console.log(key,value)obj[key]=value}这样，我们就实现了5.前端关注“前端”。对于一些敏感数据，比如登录状态，认证相关的前端应该尽量无感知的转发和携带（这样不会造成安全问题）6.页面可以降级。对于一些刚上线的新业务，或者有风险的业务模块，或者会调用第三方接口等不可信接口，这时候需要做一层降级处理。例如，接口调用失败后，消除相应模块的显示，让用户无感知地使用。容易出现安全漏洞，比如接口返回JavaScript脚本，会立即执行。这时候，如果脚本是恶意的，那么就会出现不可预知的后果，尤其是电商行业，一定要特别注意??看完三件事，如果你觉得这篇内容很有启发，我想请大家帮帮我三个小忙：点“赞”，让更多人看到这个内容（喜欢不喜欢，都是耍流氓-_-）关注我，让我们成为长期关系关注公众号“前端巅峰”，持续为你推送精选好文，你也可以加我为好友，随时聊。