• 欢迎大家分享资料!前往留言板评论即可!

(前端)学会规避一些“失败”的场景

合宙 模组资料网 5个月前 (05-15) 71次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

吐槽:在实际开发过程中,无论是前端还是后端都会遇到一些始料未及的错误,防不胜防。难受。。。
作为一名前端开发,要学会合理正确的避免一些影响用户体验、发生未知错误的事件出现。

下面来看两个比较常见的场景:

场景一:

后端的由于同时请求人数过多,或者数据量过大,又或者是因为异常导致服务异常,接口请求失败,然后前端出现白屏或者报错。

场景二:

前端自身写的代码存在一些缺陷,整个系统不够健壮,从而会出现白屏,或者业务系统异常,用户误操作等

那我们如何规避呢?下面看几个前端常见的错误以及规避方法

1、uncaught TypeError: Cannot read property ‘c’ of undefined

原因:当我们初始化一个对象obj为{}时候,obj.a这个时候是undefined.我们打印obj.a可以得到undefined,但是我们打印obj.a.c的时候,就会出现上面的错误。js对象中的未初始化属性值是undefined,从undefined读取属性就会导致这个错误(同理,null也一样)

如何避免?
js和ts目前都出现了一个可选链概念, for example:

const obj = {};
console.log(obj?.b?.c?.d)  //类似这个样子(之前也说过可选链概念以及基本使用,不懂得同学可以了解一下 )

上面的代码并不会报错,原因是?.遇到是空值的时候便会返回undefined.(这里不讨论兼容性问题)

2、前端的接口调用,有时比较频繁,我们这时候可以考虑使用单例模式,将axios请求都用一个函数封装一层。通过catch捕获接口调用时候的未知错误

function ajax(url,data,method='get'){
  const promise = axios\[ get/... ](url,data)
  return  promise.then(res=>{
  }).catch(error){
  ....................
  }
}

那么只要发生接口调用的未知错误都会在这里被处理了

3.错误边界(Error Boundaries,前端出现未知错误时,展示预先设定的UI界面)

以React为例

下面引用官网上得解释和例子向大家解释一下,不明白得同学,please to 官网—错误边界
(前端)学会规避一些“失败”的场景

(前端)学会规避一些“失败”的场景

错误边界无法捕获以下场景中产生的错误:

  • 事件处理
  • 异步代码(ec : setTimeout 或 requestAnimationFrame 回调函数)
  • 服务端渲染
  • 它自身抛出来的错误(并非它的子组件)

4.前端复杂异步场景导致的错误

这个问题可能远不止这么简单,遵循单向数据流的方式去改变数据,例如:

export const obj = {
  a:1,
  b:2
}

//使用obj
import {obj} from './test.js';
obj.a=3;

当你频繁使用这个obj对象时,你无法根据代码去知道它的改变顺序(即在某个时刻它的值是什么),而且这里面可能存在不少异步的代码,当我们换一种方式,就能知道它的改变顺序了,也更方便我们debug

export const obj = {
  a:1,
  b:2
}
export function setObj (key,value)  {
  console.log(key,value)
  obj[key] = value
}

soososososo

5.前端专注“前端”

对于一些敏感数据,例如登录态,鉴权相关的。前端应该是尽量做无感知的转发、携带(这样也不会出现安全问题),………………….我目前做的不到位

6.学会使用loading和disabled

用户操作后,要及时loading和disabled确保不让用户进行重复,防止出现bug等情况

7.innerHTML

容易出现bug,例如接口返回了一段JavaScript脚本,那么就会立即执行。此时脚本如果是恶意的,那么后果可想而知……咔咔一顿操作…

这里只说了一部分规避得方法,还有很多,有兴趣得同学可以自己总结总结。。。。。try-catch无敌….


喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址