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