如何处理异步任务？
我们先从一个老生常谈的问题开始。
回调函数
由于 javascript 是一门单线程的语言，所以我们早期来处理异步场景的时候，大部分是通过回调函数来进行处理的。
var fn = function(callback){
setTimeout(function(){
callback()
},1000)
}
fn(function(){console.log('hello, pino')})
例如上面这个例子，fn函数是一个异步函数，里面执行的 setTimeout 将会在1s之后调用传入的 callback 函数，打印出 hello,pino 这个结果。
但是当我们有多个异步操作的时候，就需要有多个异步函数进行嵌套，代码将会变得更加臃肿和难以维护。
setTimeout(function(){
console.log('执行了')
setTimeout(function(){
console.log('再次执行了')
//.....
},2000)
},1000)
同样的，还有一个例子： 假设我们有fn1，fn2，fn3三个异步函数：
let fn1 = function(){
setTimeout(function(){
console.log('pino')
},1000)
}
let fn2 = function(){
setTimeout(function(){
console.log('爱吃')
},3000)
}
let fn3 = function(){
setTimeout(function(){
console.log('瓜')
},2000)
}
我们想顺序对三个函数的结果进行顺序打印，那么使用传统的回调函数来实现的话，我们可以这样写：
var makefn = function(text,callback,timer){
setTimeout(function(){
console.log(text)
callback()
},timer)
}
makefn('pino',function(){
makefn('爱吃',function(){
makefn('瓜',function(){
console.log('结束了～')
},2000)
},3000)
},1000)
可以看到当回调任务过多的时候，我们的代码将会变的非常臃肿，尤其是多个异步函数之间层层嵌套，这就形成了回调地狱。
使用回调函数的方式来处理异步任务，当回调函数过多时，对开发者的心智负担是非常重的。
Promise
promise 对象的出现其实是对js处理异步任务迈出的一大步，它提供了非常多的针对异步的处理方法，错误捕获链式调用...
Promise 对象是一个构造函数，用来生成 Promise 实例。
Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject 。
resolve 函数： 将 Promise 对象的状态从[未完成]变为[成功]（即从 pending 变为 resolved ），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject 函数： 将 Promise 对象的状态从[未完成]变为[失败]（即从 pending 变为 rejected ），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
const person = new Promise((resolve,reject) => {
let num = 6;
if(num>5){
resolve()
}else{
reject()
}
})
Promise 实例生成以后，可以用 then 方法分别指定 resolved 状态和 rejected 状态的回调函数。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
then 方法可以接受两个回调函数作为参数。第一个回调函数是 Promise 对象的状态变为 resolved 时调用，第二个回调函数是 Promise 对象的状态变为 rejected 时调用。其中，第二个函数是可选的，这两个函数都接受 Promise 对象传出的值作为参数。
例如我们将上面的顺序打印三个异步函数进行改造：
makefn('pino',function(){
makefn('爱吃',function(){
makefn('瓜',function(){
console.log('结束了～')
},2000)
},3000)
},1000)
//改造后
fn('pino'，1000).then(function(){
return fn('爱吃',3000)
})
.then(function(){
return fn('瓜',2000)
})
.then(function(){
console.log('结束了～')
})
可以看到改造完成后的代码变得非常具有可读性和条理性。 由于本文的主角不是Promise对象，所以想要深入了解请移步： es6.ruanyifeng测试数据/#docs/promi…
async
ES2017 标准引入了 async 函数，使得异步操作变得更加方便。
async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
// 函数前面加入async关键字
async function getAllData(name) {
// 遇到await会暂停，并返回值
const data = await getData(name);
const options = await getSelect(name);
return options;
}
getAllData('pino').then(function (result) {
console.log(result);
});
下面继续使用 async 的方式来改造一下文章开头的例子：
async function makeFn() {
let fn1 = await fn1()
let fn2 = await fn2()
let fn3 = await fn3()
}
async 函数的出现几乎将异步函数完全变为了同步的写法，使异步任务更容易维护。
Generator
形式上， Generator 函数是一个普通函数，但是有两个特征。
一是， function 关键字与函数名之间有一个星号；
二是，函数体内部使用 yield 表达式，定义不同的内部状态（ yield 在英语里的意思就是[产出]）。
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var p1 = helloWorldGenerator();
上面代码定义了一个 Generator 函数 helloWorldGenerator ，它内部有两个 yield 表达式（ hello和world ）
即该函数有三个状态： hello，world 和 return 语句（结束执行）。
然后， Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。
不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是上一章介绍的遍历器对象（ Iterator Object ）。 下一步，必须调用遍历器对象的 next 方法，使得指针移向下一个状态。
也就是说，每次调用 next 方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个 yield 表达式（或 return 语句）为止。
换言之， Generator 函数是分段执行的， yield 表达式是暂停执行的标记，而 next 方法可以恢复执行。
p1.next()
// { value: 'hello', done: false }
p1.next()
// { value: 'world', done: false }
p1.next()
// { value: 'ending', done: true }
p1.next()
// { value: undefined, done: true }
上面代码一共调用了四次next方法。
Generator 函数也可以进行异步任务的处理，上面的 async 函数就是 Generator 函数的语法糖，而两者之间最大的区别就是 async 函数内置了自执行器，也就是说无需手动调用 next() 方法， async 函数就会帮我们继续向下执行，而 Generator 函数不会自动调用 next() 方法，只能进行手动调用，下面实现一个简易执行器：
// 接受一个Generator函数
function run(gen){
var g = gen();
function next(data){
var result = g.next(data);
if (result.done) return result.value;
// 只要返回的dong不为true，没有执行完毕，就继续调用next函数，继续执行
result.value.then(function(data){
next(data);
});
}
next();
}
run(gen);
使用 Generator 函数来该写一下之前的案例，其实只需要将 await 更换为 yield ：
function* makeFn() {
let fn1 = yield fn1()
let fn2 = yield fn2()
let fn3 = yield fn3()
}
本文只是简略的讲解了 Generator 函数和 async 函数，如果像深入学习，请移步：
es6.ruanyifeng测试数据/#docs/async
es6.ruanyifeng测试数据/#docs/gener…
什么是await-to-js？
说了这么多，今天的主角 await-to-js 到底是干啥的？解决了什么问题?
先来看一下作者的定义：
Async await wrapper for easy error handling without try-catch。
异步等待封装器，便于错误处理，不需要 try-catch 。
先来看一下如何使用：
安装
npm i await-to-js --save
对比一下使用 await-to-js 后，我们在代码中处理错误捕获有什么不同，这里使用 async 函数进行处理：
// async的处理方式
function async getData() {
try {
const data1 = await fn1()
} catch(error) {
return new Error(error)
}
try {
const data2 = await fn2()
} catch(error) {
return new Error(error)
}
try {
const data3 = await fn3()
} catch(error) {
return new Error(error)
}
}
// 使用await-to-js后
import to from './to.js';
function async getData() {
const [err, data1] = await to(promise)
if(err) throw new (error);
const [err, data2] = await to(promise)
if(err) throw new (error);
const [err, data3] = await to(promise)
if(err) throw new (error);
}
可以看到，使用await-to-js后我们的代码变得精简了许多，在使用 async 函数时，需要手动使用 try...catch 来进行错误捕获，而 await-to-js 直接就可以将错误返回给用户。
所以根据上面的例子，可以得出结论， await-to-js 的作用就是封装了错误捕获的处理函数，使异步的操作更加的方便。
那么 await-to-js 是如何实现的呢？
源码解析
其实 await-to-js 的源码非常短，只有15行，可以直接看一下源码中是如何实现的(为了查看源码更加的直观，下面的源码已经去除了 typescript 语法)：
export function to(
promise,
errorExt
){
return promise
.then((data) => [null, data])
.catch((err) => {
if (errorExt) {
const parsedError = Object.assign({}, err, errorExt);
return [parsedError, undefined];
}
return [err, undefined];
});
}
可以看到 await-to-js 中直接返回了 to 函数，他接受两个参数， promise 和 errorExt ，其中 promise 参数接受一个Promis对象，而 errorExt 参数是可选的，先来看一下如果不传入 errorExt 参数是什么样子的：
export function to(promise, errorExt){
// 使用then和catch来执行和捕获错误
return promise
.then((data) => [null, data])
.catch((err) => {
return [err, undefined];
});
}
to 函数直接返回了传入的 Promise 对象，并定义了 then 函数和 catch 函数，无论成功还是失败都返回一个数组,数组的第一项是错误结果，如果执行成功则返回 null ，执行失败则返回错误信息，数组的第二项为执行结果，执行成功则返回响应成功的结果，如果执行失败则返回 undefined ，这也是非常符合预期的。
那么第二个参数是干什么的呢？第二个参数 errorExt 是可选的，他接收一个对象，主要用于接收用户自定义的错误信息，然后使用 Object.assign 将自定义信息与错误信息合并到一个对象，返回给用户。
.catch((err) => {
if (errorExt) {
// 合并错误对象：默认错误信息+用户自定义错误信息
const parsedError = Object.assign({}, err, errorExt);
// 返回错误结果
return [parsedError, undefined];
}
});
刚开始看源码的时候各种不适应，但是只要沉下心去一步一步的调试，结合测试用例，有些东西真的没有想象中那么难，主要还是重在行动，想到了一个念头和想法就赶紧去做，拒绝拖沓，只有真正的行动去学习，去获取，去感知，才能真正的进步！??
最后 ?
未来可能会更新实现 mini-vue3 和 javascript 基础知识系列，希望能一直坚持下去，期待多多点赞????，一起进步！
以上就是await-to-js源码更完美处理异步任务示例详解的详细内容，更多关于await异步任务的资料请关注其它相关文章！
查看更多关于await-to-js源码深入理解处理异步任务用法示例的详细内容...