大家好，我是拾七，持续给大家补给前端干货🔥
异步处理的概念
JavaScript 中的异步处理指的是在代码执行过程中，能够不阻塞当前线程并处理一些时间较长的操作。异步处理通常涉及到回调函数、Promise、async/await 等机制。
在 JavaScript 中，传统的同步处理方式采用的是阻塞式的单线程模型。这种模型的缺点是当一个任务被执行时，它会一直执行到结束，期间如果有耗时的操作也会一直阻塞下去，直到任务执行完毕，才会执行后续的任务。这种方式会导致页面卡死，体验非常不好。
因此，JavaScript 异步处理机制应运而生，它允许在代码执行过程中，执行一些耗时的操作，而不会阻塞当前线程。
回调函数
回调函数是一种很常见的异步编程模型，通过在异步操作完成后调用回调函数来通知异步操作已结束，从而执行后续的任务。例如：
javascript
function fetchData(callback) { setTimeout(function() {const data = { name: '张三', age: 20 }; callback(data); }, 1000);}fetchData(function(data) { console.log(data);});在这个示例中，fetchData() 函数在完成数据加载后，调用回调函数 callback() 并传递数据作为参数。当数据加载完成后，控制器会跳转到回调函数中执行后续任务。
Promise
Promise 是一种比较流行的异步编程模型，它可以在异步操作完成后执行一些回调操作，并将结果返回给请求方。Promise 代表了一个异步操作的最终完成（或失败）及其结果值。例如：
javascript
function fetchData() { return new Promise(function(resolve, reject) { setTimeout(function() { const data = { name: '张三', age: 20 }; resolve(data); }, 1000); });}fetchData().then(function(data) { console.log(data);});异步处理常见场景与处理策略
异步处理常见场景包括但不限于：
- 网络请求：当请求数据需要一定的时间才能返回时，为了避免用户体验受到影响，需要进行异步处理。
- 定时任务：定时执行任务，需要进行异步处理。
- 事件处理：通过异步处理来避免事件处理函数执行时间过长，导致页面卡顿等问题。
- 大量数据处理：对于大量数据的处理，需要进行异步处理，以免阻塞主线程。
JavaScript 引擎是单线程执行的，也就是说同一时间内只有一个任务在执行。当需要进行异步操作时，通常会使用回调函数。
假设我们有一个获取用户信息的异步函数 getUserInfo，在信息获取完成后需要调用相关回调函数。一种实现方式是将回调函数作为 getUserInfo 函数的第二个参数传入，信息获取完成后调用该函数。
javascript
function getUserInfo(userId, callback) { setTimeout(function() { const userInfo = { id: userId, name: "Tom", age: 25 } callback(userInfo) }, 1000)}getUserInfo(1001, function(userInfo) { console.log(userInfo)})上述代码首先调用 getUserInfo 函数，该函数通过 setTimeout 模拟异步操作，等待 1 秒钟后获取用户信息，并在信息获取完成后调用传入的回调函数。最后在回调函数中输出用户信息。
Promise A+ 规范
Promise 的状态
一个 Promise 的当前状态必须为以下三种状态中的一种：等待态（Pending） 、执行态（Fulfilled）和 拒绝态（Rejected） 。
- 等待态（Pending） 处于等待态时，promise 需满足以下条件：
-
- 可以迁移至执行态或拒绝态（fulfill、reject）
- 执行态（Fulfilled） 处于执行态时，promise 需满足以下条件：
-
- 不能迁移至其他任何状态
- 必须拥有一个不可变的终值
- 拒绝态（Rejected） 处于拒绝态时，promise 需满足以下条件：
-
-
不能迁移至其他任何状态
-
必须拥有一个不可变的原因
-
这里的不可变指的是恒等（即可用 === 判断相等），而不是意味着更深层次的不可变（译者注：概指当 value 或 reason 不是基本值时，只要求其引用地址相等，但属性值可被更改）。
-
面试官问到 Promise A+ 规范时，首先要提出的便是三个态：pending、fulfilled、rejected
一个 promise 必须提供一个 then 方法以访问其当前值、终值和据因。
promise 的 then 方法接受两个参数：
arduino
promise.then(onFulfilled, onRejected);其中，onFulfilled 和 onRejected 都是可选参数。
-
如果 onFulfilled 不是函数，其必须被忽略
-
如果 onRejected 不是函数，其必须被忽略
发布-订阅模式
根据 Promise A+ 规范，每次 then 返回的值也需要满足 thenable，也就是说我们需要将 resolve 返回值使用 promise 包裹，在本例中就是需要将返回值包装为新的 HePromise 对象。开发之前我们不妨先来看看 Promise 链式调用的示例：
javascript
const p = new Promise(resolve => resolve(1));p.then(r1 => {console.log(r1);return 2;}) .then(r2 => {console.log(r2);return 3; }) .then(r3 => {console.log(r3); });实现all方法
就是将传入数组中的值 promise 化，然后保证每个任务都处理后，最终 resolve。示例如下：
typescript
class HePromise {static all(promises: any[]) {let index = 0;const result: any[] = [];const pLen = promises.length;return new HePromise((resolve, reject) => { promises.forEach(p => { HePromise.resolve(p).then(val => { index++; result.push(val);if (index === pLen) { resolve(result); } },err => {if (reject) reject(err); }, ); }); }); }}编写测试用例如下：
scss
it('HePromise.all', done => { HePromise.all([1, 2, 3]).then(res => { expect(res).toEqual([1, 2, 3]); done(); });});执行测试，测试通过。
实现race方法
就是将传入数组中的值 promise 化，只要其中一个任务完成，即可 resolve。示例如下：
scss
class HePromise {static race(promises: any[]): HePromise {return new HePromise((resolve, reject) => { promises.forEach(p => { HePromise.resolve(p).then(val => { resolve(val); },err => {if (reject) reject(err); }, ); }); }); }}编写测试用例：
scss
it('HePromise.race', done => { HePromise.race([11, 22, 33]).then(res => { expect(res).toBe(11); done(); });});执行测试，测试通过。
整体测试代码情况如下：
async 与 await 用法及原理详解
javascript
async function test() { const res = await Promise.resolve(1) return res}需要注意的是，使用 async、await 处理异步操作时，需要注意异常的处理。
异常处理
通常我们使用 try、catch 捕获 async、await 执行过程中抛出的异常，就像这样：
javascript
async function test() { let res = null try { const res = await Promise.resolve(1) return res } catch(e) { console.log(e) }}从零实现一个类似 async、await 的函数
promise+generator
javascript
function fn(nums) { return new Promise(resolve = >{ setTimeout(() = >{ resolve(nums * 2) }, 1000) })}function * gen() { const num1 = yield fn(1) const num2 = yield fn(num1) const num3 = yield fn(num2) return num3}function generatorToAsync(generatorFn) { return function() { return new Promise((resolve, reject) = >{ const g = generatorFn() const next1 = g.next() next1.value.then(res1 = >{ const next2 = g.next(res1) // 传入上次的res1 next2.value.then(res2 = >{ const next3 = g.next(res2) // 传入上次的res2 next3.value.then(res3 = >{ // 传入上次的res3 resolve(g.next(res3).value) }) }) }) }) }}const asyncFn = generatorToAsync(gen)asyncFn().then(res = >console.log(res)) // 3秒后输出 8自动执行
自动执行其实就是运用递归，将生成器函数产生的数据不断调用 next，直至执行完成。
lua
function getData(endpoint) { return new Promise(resolve => { setTimeout(() => { resolve(`Data received from ${endpoint}`) }, 2000) })}// 生成器函数function* getDataAsync() { const result1 = yield getData('Endpoint 1') console.log(result1) const result2 = yield getData('Endpoint 2') console.log(result2) return 'All data received'}// 将生成器函数包装成 Promisefunction asyncToPromise(generatorFn) { const generator = generatorFn() function handleResult(result) { if (result.done) { return Promise.resolve(result.value) } return Promise.resolve(result.value) .then(res => handleResult(generator.next(res))) .catch(err => handleResult(generator.throw(err))) } try { return handleResult(generator.next()) } catch (error) { return Promise.reject(error) }}asyncToPromise(getDataAsync).then(result => console.log(result))总结
这里介绍了回调函数、Promise、async/await 等机制。其中涉及到JavaScript事件循环机制没有展开分析，后续会总结相应的通关手册。
