共计 4745 个字符,预计需要花费 12 分钟才能阅读完成。
引言
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… 不胜感激!