前端promise（前端捕获异常技巧总结）

本文目录

• 前端捕获异常技巧总结
• 中级前端需要手写promise吗
• 前端必学-函数式编程（六）
• promise执行顺序
• 前端进阶知识谱

前端捕获异常技巧总结

异常分类 捕获异常技巧 1.可疑区脊含域增加 try...catch（只能捕获到同步的运行时错误，对于语法和异步错误无能为力，捕获不到。） 2.全局监控JS异常： window.onerror（不是万能的，只有在返回 true 的时带野迟候，异常才不会向上抛出（浏览器接收后报红），否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx，最好写在所有JS脚本的前面，否则有可能捕获不到错误，无法捕获语法错误） 3.全局监控静态资源异常： window.addEventListener 4.全局捕获没蠢李有 catch 的 promise 异常：unhandledrejection 5.iframe 异常：window.onerror 6.VUE errorHandler 和 React componentDidCatch 7.监控网页崩溃：window 对象的 load 和 beforeunload 8.Script Error跨域 crossOrigin 解决（跨源资源共享机制( CORS )：我们为 script 标签添加 crossOrigin 属性）

中级前端需要手写promise吗

中级前端需要手写promise。

一.Promise是异步编程的一种解决方案，它是一个容器，里面保存着某个未来才会结改戚束的事件（通常是一个异步操作）的结果。

从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同

样的方法进信歼裂行处理。promise对象是一个构造函数，用来生成Promise实例；

二.promise的两个特点    对象状态不受外界影响 && 一旦状态改变，就不会再变，任何时候滑闭都可以得到结果（pending状态--》fulfilled || pending--》rejected）

基本用法  函数作为参数，该函数两个参数resolve和reject

前端必学-函数式编程（六）

我们前篇谈了很多关于【闭包】的理解了，所以你应该会知道，我们现在将要谈的就是 ——【异步】。

我们为什么觉得“异步问题”复杂呢？

其中很重要的一个原因是 —— 时间！时间将我们对数据的操判运作、管理，变复杂了好几个量级！

（需要特别提出并明确的是： 异步和同步之间是可以相互转化的！ 我们使用异步或者同步取决于 —— 如何使代码更加可读！）

函数式编程给出了实现“代码更可读”的落地原则（已多次回顾）：

所以我们可以期待，异步在函数式编程中的表现！

上代码：

onCustomer(..) 和 onOrders(..) 是两个【回调函数】释义，两者执行的先后顺序并不能确定，所以它是一个基于时间掘唤梁的复杂状态。

释义：回调函数其实就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。

通常来说，我们最先想到的是：把 lookupOrders(..) 写到 onCustomer(..) 里面，那我们就可以确认 onOrders(..) 会在 onCustomer(..) 之后运行。

这样写，对吗？

不对！因为 onCustomer(..) 、 onOrders(..) 这两个回调函数的关系更像是一种竞争关系（都是赋值 customer.orders ）， 它们应该并行执行 ， 而不是串行执行 。

即：我不管你们谁先执行，谁先执行完，谁就赋值给 customer.orders ！

那我们的思路应该是：

不过，这样让代码又变得更加难阅读！！函数内部赋值依赖于外部变量、甚至受外部回调函数的影响。

那究竟怎么办呢？

最终，我们借用 JS promise 减少这个时间状态，将异步转成同步：

两个 .then(..) 运行之前， lookupCustomer(..) 和 lookupOrders(..) 已被同步调用，满足并行执行，谁先结束，谁赋值给 customer.orders ，所以我们不需要知道谁先谁后！

在这样的实现下，不再需要时间先后的概念！减少了时间状态！！代码的可读性更高了！！

这是一个 积极的数组 ，因为它们同步（即时）地操作着离散的即时值或值的列表/结构上的值。

什么意思？

a 映射到 b，再去修改 a ，b 不会收到影响。

而这，是一个 惰性的数组 ， mapLazy(..) 本质上 “监听” 了数组 a，只要一个新的值添加到数组的末端（push(..)），它都会运行映射函数 v =》 v * 2 并把改变后的值添加到数组 b 里。

什么意思？

a 映射到 b，再去修改 a ，b 也会修改。

原来，后者存在 异步 的概念。

让我们来想象这样一个链樱数组，它不只是简单地获得值，它还是一个懒惰地接受和响应（也就是“反应”）值的数组，比如：

设置“懒惰的数组” a 的过程是异步的！

b ，是 map 映射后的数组，但更重要的是，b 是 反应性 的，我们对 b 加了一个类似监听器的东西。

这里直接给出解答：

这里再多小结一句：时间让异步更加复杂，函数式编程在异步下的运用就是减少或直接干掉时间状态。

想象下 a 还可以被绑定上一些其他的事件上，比如说用户的鼠标点击事件和键盘按键事件，服务端来的 websocket 消息等。

上述的 LazyArray 又可叫做 observable ！（当然，它不止用在 map 方法中）

现在已经有各种各样的 Observables 的库类，最出名的是 RxJS 和 Most 。

以 RxJS 为例：

不仅如此，RxJS 还定义了超过 100 个可以在有新值添加时才触发的方法。就像数组一样。每个 Observable 的方法都会返回一个新的 Observable，意味着他们是链式的。如果一个方法被调用，则它的返回值应该由输入的 Observable 去返回，然后触发到输出的 Observable里，否则抛弃。

比如：

本篇介绍了【异步】在函数式编程中的表现。

原则是：对于那些异步中有时态的操作，基础的函数式编程原理就是将它们变为无时态的应用。即 减少时间状态 ！

就像 promise 创建了一个单一的未来值，我们可以创建一个积极的列表的值来代替像惰性的observable（事件）流的值。

我们介绍了 RxJS 库，后续我们还会介绍更多优美的 JS 函数式编程库！

（俗话说的好，三方库选的好，下班都很早！！）

现在本瓜有点明白那句话了：看一门语言是不是函数式编程，取决于它的核心库是不是函数式编程。

也许我们还不熟悉像 RxJS 这类库，但我们慢慢就会越来越重视它们，越来越使用它们，越来越领会到它们！！

异步，以上。

promise执行顺序

在我们的工作和学习当中，到处充满了异步的身影，到底什么是异步，什么是异步编程，为什么要用异步编程，以及经典的异步编程有哪些，在工作中的场景又有什么，我们一点点深入的去学习。什么是异步编程？有必要了解一下，什么是异步编程，为什么要异步编程。先说一个概念异步与同步。介绍异步之前，回顾一下，所谓同步编程，就是计算机一行一行按顺序依次执行代码，当前代码任务耗时执行会阻塞后续代码的执行。同步编程，即是一种典型的请求-响应模型，当请求调用一个函数或方法后，需等待其响应返回，然后执行后续代码。一般情况下，同步编程，代码按序依次执行，能很好的保证程序的执行，但是在某些场景下，比如读取文件内容，或请求服务器接口数据，需要根据返回的数据内容执行后续操作，读取文件和请求接口直到数据返回这一过程是需要时间的，网络越差，耗费时间越长。如果按照同步编程方式实现，在等待数据返回这段时间，JavaScript是不能处理其他任务的，此时页面的交互，滚动等任何操作也都会被阻塞，这显然是及其不友好，不可接受的，而这正是需要异步编程大显身手的场景。我们想通过Ajax请求数据来渲染页面，这是一个在我们前端当中很常见渲染页面的方式。基本每个页面都会都这样的过程。在这里用同步的方式请求页面会怎么样？浏览器锁死，不能进行其他操作。而且每当发送新的请求，浏览器都会锁死，用户体验极差。在浏览器中同步执行将会是上面的这个样子，任务1做完才能做任务2，任务2做完才会做任务3。这里面体现出同步编程的有序的特点。只能1，2，3不能1，3，2。但是我们的代码逻辑中可以存在多任务同时执行的过程。在我们生活中，煮饭和烧水可以同时去做，同样在我们编程中也需要这样的逻辑。在计算机中有多线程的概念，什么意思呢，每一个线程做一件事，像下面这样。在不同的线程中可以执行不同的任务。但是我们的JavaScript是单线程的，这里的单线程，强调的执行线程是单线程。后面也是有线程池的，线程以及线程池的概念在这里就不多说了。想了解的同学可以看看操作系统相关书籍。JavaScript语言执行环境是单线程的，单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。但是我们也需要类似多线程机制的这种执行方式。但是JavaScript还是单线程的，我们需要异步执行，异步执行会使得多个任务并发执行。并行与并发。前文提到多线程的任务可以并行执行，而JavaScript单线程异步编程可以实现多任务并发执行，这里有必要说明一下并行与并发的区别。并行，指同一时刻内多任务同时进行。边薯返煮饭，边烧水，可以同时进行并发，指在同一时间段内，多任务同时进行着，但是某一时刻，只有某一任务执行。边吃饭边喝水，同一时间点只能喝水和吃饭。接下来说一说异步机制并发模型目前，我们已经知道，JavaScript执行异步任务时，不需要等待响应返回，可以继续执行其他任务，而在响应返回时，会得到通知，执行回调或事件处理程序。那么这一切具体是如何完成的，又以什么规则或顺序运作呢？接下来我们需要解答这个问题。回调和事件处理程序本质上并无区别，只是在不同情况下，不同的叫法。前文已经提到，JavaScript异步编程使得多个任务可以并发执行，而实现这一功能的基础是JavaScript拥有一个基于事件循环的并发模型。堆栈与队列介绍JavaScript并发模型之前，先简单介绍堆栈和队列的区别：堆（heap）：内存中某一未被阻止的区域，通常存储对象（引用类型）；栈（stack）：后进先出的顺序存储数据结构，通常存储函数参数和基本类型值变量（按值访问）；队列（queue）：先进先出顺序存储数据结构。事件循环（EventLoop）：JavaScript引擎负责解析，执行JavaScript代码，但它并不能单独运行，通常都得有一个宿主环境，一般如浏览器或Node服务器，前文说到的单线程是指在这些宿主环境创建单一线程，提供一种机制，调用JavaScript引擎完成多个歼神JavaScript代码块的调度，执行（是的，JavaScript代码都是按块执行的），这种机制就称为事件循环（EventLoop）。JavaScript执行环境中存氏手亏在的两个结构需要了解：消息队列(messagequeue)，也叫任务队列（taskqueue）：存储待处理消息及对应的回调函数或事件处理程序；执行栈(executioncontextstack)，也可以叫执行上下文栈：JavaScript执行栈，顾名思义，是由执行上下文组成，当函数调用时，创建并插入一个执行上下文，通常称为执行栈帧（frame），存储着函数参数和局部变量，当该函数执行结束时，弹出该执行栈帧；注：关于全局代码，由于所有的代码都是在全局上下文执行，所以执行栈顶总是全局上下文就很容易理解，直到所有代码执行完毕，全局上下文退出执行栈，栈清空了；也即是全局上下文是第一个入栈，最后一个出栈。任务分析事件循环流程前，先阐述两个概念，有助于理解事件循环：同步任务和异步任务。任务很好理解，JavaScript代码执行就是在完成任务，所谓任务就是一个函数或一个代码块，通常以功能或目的划分，比如完成一次加法计算，完成一次ajax请求；很自然的就分为同步任务和异步任务。同步任务是连续的，阻塞的；而异步任务则是不连续，非阻塞的，包含异步事件及其回调，当我们谈及执行异步任务时，通常指执行其回调函数。

前端进阶知识谱

如何解决跨域的问题 文件上传如何做断点续传 表单可以跨域吗 promise、async有什么区别 防抖/节流 介绍service worker 介绍Promise，异常捕获 浏览器事件流向 介绍事件代理以及优缺点 介绍this各种使用情况 JS异步解决方案的发展历程以及优缺点 对async、await的理解，内部原理 bind、call、apply的区别 原型链 ES6中的map和原生的对象有什么区别 如何设计Promise.all() Async里面有多个await请求，可以怎么优化（请求是否有依赖） Promise和Async处理失败的时候有什么区别 页面上生成一万个button，并且绑定事件，如何做（JS原生操作DOM） new是怎么实现的 formData和原生的ajax有什么区别 介绍下表单提交，和formData有什么关系 内存泄露, JS垃圾回收机制 介绍宏任务和微任务 node文件查找优先级 使用过的koa2中间件, koa2中间件原理, 介绍你写过的中间件 koa-body原理 有没有涉及到Cluster 介绍pm2, master挂了的话pm2怎么处理 如何和MySQL进行通信 移动端适配1px的问题 介绍flex布局 css方式设置垂直居中, 居中为什么要使用transform（为什么不使用marginLeft/Top） 介绍css3中position:sticky 清除浮动 如何实现H5手机端的适配 前端怎么控制管理路由 import { Button } from ’antd’ ，打包的时候只打包button，分模块加载，是怎么做到的 介绍虚拟DOM, 以及Diff算法 生命周期 数据响应实现方式 Vue缺点, 或者遇到的问题, 如何解决？ 使用过webpack里面哪些plugin和loader webpack里面的插件是怎么实现的 dev-server是怎么跑起来 抽取公共文件是怎么配置的 webpack整个生命周期，loader和plugin有什么区别 配css需要哪些loader, 如何配sass，需要配哪些loader 常见Http请求头 ***隐藏网址*** ***隐藏网址*** cookie和session有哪些方面的区别 从输入URL到页面祥团谈加载全过程 tcp3次握手 ***隐藏网址*** 介绍下HTTP状态码 介绍HTTPS, HTTPS怎么建谨碰立安全通道 网络的五层模型 介绍冒泡排序，选择排序，冒泡排序如何优化 如何判断链表是否有环 介绍二叉搜索树的特点 如何找0-5的随机数，95-99呢 项目/工程优化 前端性能提升 前端怎么做单元测试 介绍观察者模式 介绍中介者模式 观察者和订阅-发布的区别，各自用在哪里 单例或兆模式 工厂模式 WebView和原生是如何通信 xsrf跨域攻击的安全性问题怎么防范 对PWA有什么了解