JavaScript 单线程之异步编程

技术分享 3年前 (2022-05-18) 0 999+

Js 单线程之异步编程

先了解一个概念，为什么 JavaScript 采用单线程模式工作，最初设计这门语言的初衷是为了让它运行在浏览器上面。它的目的是为了实现页面的动态交互，而交互的核心是进行 Dom 操作，这也就决定了必须使用单线程模式，否则就会出现很复杂的线程同步问题。假如有两个同步线程工作，其中一个线程进行了新增 demoA，另一个线程进行了删除 demoA，此时浏览器就无法明确以哪个线程的工作为准，所以 JavaScript 就成了单线程模式工作，单线程工作的优点就是，多个任务，同步执行，简单安全，同时缺点也很明显，如果有一个任务耗时的时间非常非常久，那我们就得排队等待，这就会导致整个页面出现像卡死这种情况。

为了解决这种阻塞问题，JavaScript 将任务的执行模式分成了两种：

同步模式（Synchronous）
异步模式（Asynchronous）

同步模式

指的是代码中的任务依次执行，后一个任务必须等待前一个任务结束才能开始执行，程序的执行顺序和代码的编写顺序完全一致。举个简单栗子

console.log('start')  function part1 () {     console.log('loading part1') }  function part2 () {     console.log('loading part2')     part1() }  part2()  console.log('end')  // 顺序结果 start --- loading part2 --- loading part1 --- end // 同时就会触发概念里面那个问题，如果有一个任务耗时特别长，就会出现页面卡死情况，为了避免这种情况，也就有了另一种模式，异步

异步模式

指的是，不会去等待这个任务的结束才开始下一个任务，对于耗时操作，开启之后，立即执行下一个任务，后续逻辑一般会通过回调函数的方式定义。用代码来举个栗子

console.log('start')  setTimeout (function timer1 () {     console.log('timer1 invoke') }, 2000)  setTimeout (function timer2 () {     console.log('timer2 invoke')          setTimeout (function inner () {         console.log('inner')     }, 1000) }, 1000)  console.log('end')  // 结果 start --- end --- timer2 invoke --- timer1 invoke --- inner // 同步任务开始执行，碰到计时器丢到任务队列中，同步任务执行完毕，没有微任务，开始执行宏任务，根据倒计时时间，以及里面是否还有其他对应操作，直到结束。 // js 执行引擎先去做完调用栈里面所有的任务，通过事件循环从消息队列中再取出一个任务出来继续执行，以此类推，同时还能随时往消息队列中放入新的任务，排队等待执行，以上就是基本的概念。

回调函数

所有异步编程方案的根本都是回调函数，回调函数可以理解为一件你想要做的事情，定义他的执行规则，然后交给执行者去执行的函数。举个栗子

function foo (callback) {     setTimeout(function () {         callback()     }, 3000) }  foo(function () {     console.log('这就是一个回调函数')     console.log('调用者定义这个函数，执行者执行这个函数')     console.log('其实就是调用者告诉执行者异步任务结束后应该做什么') }) // 随之而来，就出现了另一个问题，如果说函数A为回调函数，但是他又接受函数B作为参数，函数B又有一个函数C，这就形成了层层嵌套，就会出现回调地狱。为了解决这个问题，出现了 Promise

Promise

由 CommonJS 社区提出的 Promise，在ES2015 中被标准化，成为语言规范

所为的 Promise 就是一个对象，用来去表示一个异步任务最终结束过后究竟是成功还是失败，初始化由内部对外界作出一个承诺 pending 待定状态，最终成功之后，会变为 Fulfilled 同时会有一个 onFulfilled 回调，如果失败，会变为 Rejected，也会有一个 onRejected 回调，而且一旦由 pending 变为成功或者失败，其状态就不会更改了。

// 基本栗子 const promise = new Promise(function (resolve, reject) {     resolve(200) // 成功          // reject(new Error('rejected')) // 失败 }) // 通过.then 调用 promise.then(function (value) {     console.log('resolved', value) }, function(error) {     console.log('rejected, error') }) 注释失败代码那一行，结果就是 200成功 注释成功代码那一行，结果就是 失败

里面的.then方法，是返回一个全新的 Promise 对象，它的目的是为了实现一个 Promise 链条，也就是承诺成功或失败之后再返回一个新的承诺，也就是链式调用的方式来解决回调地狱嵌套。总结以下几点：

Promise 对象的 then 方法会返回一个全新的 Promise 对象
后面的 then 方法就是在为上一个 then 返回的 Promise 注册回调
前面 then 方法中回调函数的返回值作为后面 then 方法回调的参数
如果回调函数中返回的是 Promise，那后面 then 方法的回调等待它的结束

对于异常处理 onRejected 会自动弹出异常，也还有常用的 .catch 来处理异常

Promise 静态方法

创建一个成功的 Promise.resolve() 对象，反之还有一个 Promise.reject() 创建一个失败的对象

Promise 并行执行

Promise.all([]) 接收一个数组，每一个元素都是一个 Promise 对象，也就是异步任务，当里面所有的异步任务结束后这个方法结束后会返回一个全新的 Promise 对象，这个 Promise 对象会返回一个数组的结果，里面的每一项都对应着，每一个异步任务的结果，但是只要有一项失败，那就会立即抛出错误。

Promise.race([]) 方法同上，不同的是，只有一项成功，就会返回最新成功的那个结果。

发表评论