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