JavaScript 单线程之异步编程

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([]) 方法同上,不同的是,只有一项成功,就会返回最新成功的那个结果。

    原文作者:地灵
    原文地址: https://www.cnblogs.com/earthZhang/p/16282043.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞