引言
async/await是十分棒的语法糖，能够说他是解决异步问题的最终解决方案。从字面意思来了解。async 是异步的意思，而 await 是 期待 ，所以了解 async用于申明一个function是异步的，而 await 用于期待一个异步办法执行实现。
async作用
async申明function是一个异步函数，返回一个promise对象，能够应用 then 办法增加回调函数。async函数外部return语句返回的值，会成为then办法回调函数的参数。
async function test() {
return 'test';
}
console.log(test); // [AsyncFunction: test] async函数是[AsyncFunction]构造函数的实例
console.log(test()); // Promise { 'test' }
// async返回的是一个promise对象
test().then(res=>{
console.log(res); // test
})
// 如果async函数没有返回值 async函数返回一个undefined的promise对象
async function fn() {
console.log('没有返回');
}
console.log(fn()); // Promise { undefined }
// 能够看到async函数返回值和Promise.resolve()一样，将返回值包装成promise对象，如果没有返回值就返回undefined的promise对象
复制代码
await
await 操作符只能在异步函数 async function 外部应用。如果一个 Promise 被传递给一个 await 操作符，await 将期待 Promise 失常解决实现并返回其处理结果，也就是说它会阻塞前面的代码，期待 Promise 对象后果。如果期待的不是 Promise 对象，则返回该值自身。
async function test() {
return new Promise((resolve)=>{
setTimeout(() => { resolve('test 1000');}, 1000);})
}
function fn() {
return 'fn';
}
async function next() {
let res0 = await fn(), res1 = await test(), res2 = await fn();console.log(res0);console.log(res1);console.log(res2);}
next(); // 1s 后才打印出后果 为什么呢 就是因为 res1在期待promise的后果 阻塞了前面代码。
复制代码
错误处理
如果await前面的异步操作出错，那么等同于async函数返回的 Promise 对象被reject。
async function test() {
await Promise.reject('谬误了')
};
test().then(res=>{
console.log('success',res);
},err=>{
console.log('err ',err);
})
// err 谬误了
复制代码
避免出错的办法，也是将其放在try...catch代码块之中。
async function test() {
try {
await new Promise(function (resolve, reject) { throw new Error('谬误了');});} catch(e) {
console.log('err', e)}
return await('胜利了');
}
复制代码
多个await命令前面的异步操作，如果不存在继发关系（即互不依赖），最好让它们同时触发。
let foo = await getFoo();
let bar = await getBar();
// 下面这样写法 getFoo实现当前，才会执行getBar
// 同时触发写法 ↓
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
复制代码
async/await长处
async/await的劣势在于解决由多个Promise组成的 then 链，在之前的Promise文章中提过用then解决回调天堂的问题，async/await相当于对promise的进一步优化。 假如一个业务，分多个步骤，且每个步骤都是异步的，而且依赖上个步骤的执行后果。
// 假如表单提交前要通过俩个校验接口
async function check(ms) { // 模拟异步
return new Promise((resolve)=>{
setTimeout(() => { resolve(`check ${ms}`);}, ms);})
}
function check1() {
console.log('check1');
return check(1000);
}
function check2() {
console.log('check2');
return check(2000);
}
// -------------promise------------
function submit() {
console.log('submit');
// 通过俩个校验 多级关联 promise传值嵌套较深
check1().then(res1=>{
check2(res1).then(res2=>{ /* * 提交申请 */})})
}
submit();
// -------------async/await-----------
async function asyncAwaitSubmit() {
let res1 = await check1(), res2 = await check2(res1); console.log(res1, res2); /* * 提交申请 */}
复制代码
原理
async 函数的实现原理，就是将 Generator 函数和主动执行器，包装在一个函数里。
async function fn(args) {
// ...
}
// 等同于
function fn(args) {
return spawn(function* () {
// ...});
}
复制代码
/*
- Generator 函数就是一个封装的异步工作，或者说是异步工作的容器。
- 异步操作须要暂停的中央，都用 yield 语句注明
- 调用 Generator 函数，返回的是指针对象(这是它和一般函数的不同之处),。调用指针对象的 next 办法，会挪动外部指针。
- next 办法的作用是分阶段执行 Generator 函数。每次调用 next 办法，会返回一个对象，示意以后阶段的信息（ value 属性和 done 属性）。value 属性是 yield 语句前面表达式的值，示意以后阶段的值；done 属性是一个布尔值，示意 Generator 函数是否执行结束，即是否还有下一个阶段。
*/
// 理解generator的用法
function* Generator() {
yield '1';
yield Promise.resolve(2);
return 'ending';
}
var gen = Generator(); // 返回指针对象 Object [Generator] {}
let res1 = gen.next();
console.log(res1); // 返回以后阶段的值 { value: '1', done: false }
let res2 = gen.next();
console.log(res2); // 返回以后阶段的值 { value: Promise { 2 }, done: false }
res2.value.then(res=>{
console.log(res); // 2
})
let res3 = gen.next();
console.log(res3); // { value: 'ending', done: true }
let res4 = gen.next();
console.log(res4); // { value: undefined, done: true }
复制代码
Generator实现async函数
// 承受一个Generator函数作为参数
function spawn(genF) {
// 返回一个函数
return function() {
// 生成指针对象 const gen = genF.apply(this, arguments); // 返回一个promise return new Promise((resolve, reject) => { // key有next和throw两种取值，别离对应了gen的next和throw办法 // arg参数则是用来把promise resolve进去的值交给下一个yield function step(key, arg) { let result; // 监控到谬误 就把promise给reject掉 内部通过.catch能够获取到谬误 try { result = gen[key](arg) } catch (error) { return reject(error) } // gen.next() 返回 { value, done } 的构造 const { value, done } = result; if (done) { // 如果曾经实现了 就间接resolve这个promise return resolve(value) } else { // 除了最初完结的时候外，每次调用gen.next() return Promise.resolve( // 这个value对应的是yield前面的promise value ).then((val)=>step("next", val),(err) =>step("throw", err)) } } step("next") })}
}
复制代码
测试
function fn(nums) {
return new Promise(resolve => {
setTimeout(() => { resolve(nums)}, 1000)})
}
// async 函数
async function testAsync() {
let res1 = await fn(1);
console.log(res1); // 1
let res2 = await fn(2);
console.log(res2); // 2
return res2;
}
let _res = testAsync();
console.log('testAsync-res',_res); // Promise
_res.then(v=>console.log('testAsync-res',v)) // 2
// Generator函数
function* gen() {
let res1 = yield fn(3);
console.log(res1); // 3
let res2 = yield fn(4);
console.log(res2); // 4
// let res3 = yield Promise.reject(5);
// console.log(res3);
return res2;
}
let _res2 = spawn(gen)();
console.log('gen-res',_res2); // Promise
_res2
.then(v=>console.log('gen-res',v)) // 4
.catch(err=>{console.log(err)}) // res3 执行会抛出异样
复制代码
最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163互相学习，咱们会有业余的技术答疑解惑
如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点star: https://gitee.com/ZhongBangKe...不胜感激 ！