极客笔记js async
什么是js async异步编程
在讲解异步编程之前，我们先来了解下同步编程。在传统的同步编程中，代码是按照顺序执行的，每一行代码的执行必须要等待上一行代码执行完毕后才能执行下一行。这种方式在处理简单的任务时是没有问题的，但在处理一些需要等待的任务时，就会出现问题。例如，在进行网络请求时，如果按照同步的方式，那么一旦发起网络请求，就必须等待服务器返回数据后才能进行其他操作，这样会造成程序的阻塞，用户也可能会面临长时间的等待。
而异步编程就是为了解决这个问题而诞生的。异步编程可以使计算机在等待某个任务完成的过程中，去执行其他的任务，从而提高程序的运行效率。在JavaScript中，异步编程主要有以下几种实现方式：回调函数、Promise、Generator和async/await。
js async回调函数
回调函数是一种非常常见的异步编程方式。当某个任务执行完成后，就会调用相应的回调函数来处理返回的结果。
function asyncTask(callback) {
setTimeout(function() {
// 模拟耗时操作
callback(null, 'Done');
}, 1000);
}
asyncTask(function(error, result) {
if (error) {
console.error(error);
} else {
console.log(result);
}
});
在上面的例子中，asyncTask函数模拟了一个异步操作，它在1秒后调用回调函数，并传入一个错误对象和一个结果字符串。我们通过回调函数来处理任务的结果。
js Promise
Promise是ES6中新增的一个语法特性，用于解决回调函数带来的多层嵌套问题，使异步编程更加简洁易读。
创建Promise
可以通过Promise的构造函数来创建一个Promise对象。构造函数接受一个函数作为参数，这个函数的两个参数分别是resolve和reject，表示Promise的两种状态。
const promise = new Promise(function(resolve, reject) {
setTimeout(function() {
// 模拟耗时操作
resolve('Done');
}, 1000);
});
上面的例子中，promise对象会在1秒后将状态变为fulfilled，并传入一个结果字符串。
处理Promise的状态
Promise有三种状态：pending（进行中），fulfilled（已成功）和rejected（已失败）。可以通过then方法来处理Promise的状态。
promise.then(function(result) {
console.log(result);
}).catch(function(error) {
console.error(error);
});
在then方法中，我们传入了一个回调函数来处理fulfilled状态的结果，而在catch方法中，我们传入一个回调函数来处理rejected状态的错误。
Promise链式调用
由于then方法会返回一个新的Promise对象，因此我们可以通过链式调用的方式来处理多个异步任务的结果。
const promise1 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('Result 1');
}, 1000);
});
const promise2 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('Result 2');
}, 2000);
});
promise1.then(function(result1) {
console.log(result1);
return promise2;
}).then(function(result2) {
console.log(result2);
}).catch(function(error) {
console.error(error);
});
在上面的例子中，通过promise1的then方法返回了promise2对象，从而实现了两个异步任务的依次执行，而不需要嵌套的回调函数。
js Generator
Generator 是 ES6 引入的一种异步编程解决方案，允许我们在函数执行过程中，中断函数的执行，在需要的时候再恢复执行。
创建 Generator 函数
通过在函数名前添加一个 *，可以定义一个 Generator 函数。
function* generatorFunc() {
yield 'Result 1';
yield 'Result 2';
}
const generator = generatorFunc();
在上面的例子中，generatorFunc 函数是一个 Generator 函数，它通过 yield 关键字暂停函数执行，并返回一个值。我们可以通过调用 generatorFunc 函数得到一个 generator 对象。
执行 Generator 函数
调用 Generator 函数并不会执行其中的代码，而是返回一个遍历器对象。我们需要使用 next 方法来让 Generator 函数执行到下一个 yield 语句。
console.log(generator.next()); // { value: 'Result 1', done: false }
console.log(generator.next()); // { value: 'Result 2', done: false }
console.log(generator.next()); // { value: undefined, done: true }
上面的代码中，我们通过 next 方法来执行了三次 Generator 函数。每次调用 next 方法都会返回一个对象，其中 value 属性表示当前 yield 语句的返回值，而 done 属性表示 Generator 函数是否执行完毕。
使用 yield* 关键字
在 Generator 函数中，我们可以使用 yield* 关键字来让一个 Generator 函数等待另一个 Generator 函数执行完毕。
function* generatorFunc1() {
yield 'Result 1';
yield* generatorFunc2();
yield 'Result 3';
}
function* generatorFunc2() {
yield 'Result 2';
}
const generator = generatorFunc1();
console.log(generator.next()); // { value: 'Result 1', done: false }
console.log(generator.next()); // { value: 'Result 2', done: false }
console.log(generator.next()); // { value: 'Result 3', done: false }
console.log(generator.next()); // { value: undefined, done: true }
在上面的例子中，通过 yield* generatorFunc2() 的调用，我们让 generatorFunc1 等待 generatorFunc2 执行完毕后再继续执行。
Async/await
Async/await 是 ES7 中引入的一种异步编程解决方案，它基于 Promise 对象，并使用标准的同步方式编写异步代码，使得异步代码的逻辑更加清晰明了。
创建 Async 函数
通过在函数名前面添加 async 关键字，可以定义一个 Async 函数。
async function asyncFunc() {
return 'Result';
}
asyncFunc().then(function(result) {
console.log(result); // 'Result'
});
在上面的例子中，asyncFunc 函数是一个 Async 函数，它直接返回一个值。我们可以使用 then 方法来获取返回值。
await 关键字
在 Async 函数内部，可以使用 await 关键字来等待一个 Promise 对象的状态变为 fulfilled，并返回 Promise 的结果。
function asyncTask() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
// 模拟耗时操作
resolve('Done');
}, 1000);
});
}
async function doAsyncTask() {
try {
const result = await asyncTask();
console.log(result); // 'Done'
} catch (error) {
console.error(error);
}
}
doAsyncTask();
在上面的例子中，asyncTask 函数返回一个 Promise 对象，在其中执行异步操作，并在操作完成后调用 resolve 方法将状态变为 fulfilled。在 doAsyncTask 函数中，我们使用 await 关键字来等待 asyncTask 函数的执行结果，而不需要通过 then 方法来处理。
注意，在 doAsyncTask 函数内部，我们使用了 try/catch 语句来捕获可能发生的错误。
异步操作的顺序执行
在 Async 函数中，可以通过 await 关键字实现异步操作的顺序执行。
async function sequentialAsyncTasks() {
const result1 = await asyncTask1();
console.log(result1);
const result2 = await asyncTask2();
console.log(result2);
const result3 = await asyncTask3();
console.log(result3);
}
在上面的例子中，sequentialAsyncTasks 函数会依次执行三个异步任务，并在每个任务完成后打印结果。
并行执行多个异步操作
有时候，我们需要并行执行多个异步操作，并在全部操作完成后获取结果。可以使用 Promise.all 方法结合 Async/await 来实现。
async function parallelAsyncTasks() {
const results = await Promise.all([asyncTask1(), asyncTask2(), asyncTask3()]);
console.log(results);
}
在上面的例子中，parallelAsyncTasks 函数会同时执行三个异步任务，并通过 await 关键字等待全部任务完成。Promise.all 方法会返回一个 Promise 对象，其中包含了所有异步任务的结果。
错误处理
在使用 Async/await 进行异步编程时，错误的处理可以通过 try/catch 语句来实现。
async function handleError() {
try {
const result = await asyncTask();
console.log(result);
} catch (error) {
console.error('An error occurred:', error.message);
}
}
在上面的例子中，如果 asyncTask 执行过程中抛出了错误，那么错误会被 catch 语句捕获，并进行相应的处理。
js async总结
异步编程是一种能够提高程序运行效率的重要技术，在JavaScript中有几种常用的异步编程解决方案：回调函数、Promise、Generator和Async/await。每种解决方案都有自己的特点和适用场景。回调函数是最基础的异步编程方式，但会导致回调地狱的问题；Promise通过链式调用来处理异步任务，代码更加简洁易读；Generator利用yield和yield*可以在函数执行过程中暂停和恢复执行，并可以嵌套调用其他Generator函数；而Async/await是在Promise的基础上增强了代码的可读性，并且可以使用同步方式的语法编写异步代码。
在实际开发中，我们可以根据具体的需求和团队的技术栈来选择合适的异步编程方式，以提高代码的可维护性和可扩展性。