前言
为什么要学习async
/await
出现async/await
是因为在使用Promise
时,需要频繁地使用.then()
方法来处理异步操作的结果,这样会导致代码可读性较差,而且错误处理也比较麻烦。
使用 async/await
可以让异步代码的写法更加简洁和直观,使代码更易读、易懂和易维护。
最重要的一点是有些面试会考
async和await语法和用法
async和await的基本用法
async
函数返回一个 Promise 对象,可以使用then
方法添加回调函数。当函数执行的时候,一旦遇到await
就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
。
function timeout(ms) {
return new Promise((res) => {
setTimeout(res, ms);
});
}
async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value);
}
asyncPrint('hello world', 1000);
//在1s后输出hello world
- async函数有多种使用形式
// 函数声明
async function foo() {}
// 函数表达式
const foo = async function () {};
// 对象的方法
let obj = {async foo(){}};
obj.foo().then()
// 箭头函数
const foo = async () => {};
// Class 的方法
class Test{async getRequest(){}}
const test = new Test()
test.getRequest().then()
async和await语法
1.async
函数返回一个 Promise 对象,async
函数内部return
语句返回的值,会成为then
方法回调函数的参数。
2. 只有async
函数内部的异步操作执行完,才会执行then
方法指定的回调函数。
3.await
后面跟的是一个 Promise
对象,如果不是,则会包裹一层 Promise.resolve()
async函数实现原理
async 函数的实现原理,就是将 Generator 函数和自动执行器,包装在一个函数里,简而言之,就是 Generator 函数的语法糖。
Generator
函数?function
关键字与函数名之间有一个星号;二是,函数体内部使用yield
表达式,定义不同的内部状态
Generator 函数返回的遍历器对象,只有调用next
方法才会遍历下一个内部状态,所以其实提供了一种可以暂停执行的函数。yield
表达式就是暂停标志。
// generator函数基本用法
function* generator() {
yield 1;
yield 2;
yield 3;
return 4;
}
const self = generator();
console.log(self.next()); //{ value: 1, done: false }
console.log(self.next()); //{ value: 2, done: false }
console.log(self.next()); //{ value: 3, done: false }
console.log(self.next()); //{ value: 4, done: true }
//如果不写return 则调用第四次self.next()为{ value: undefined, done: true}
//generator+promise使用
function* generator() {
yield Promise.resolve("1");
yield Promise.resolve("2");
yield Promise.resolve("3");
return Promise.resolve("4");
}
const self = generator();
const next1 = self.next();
next1.value.then((res1) => {
console.log(res1);
const next2 = self.next();
next2.value.then((res2) => {
console.log(res2);
//...往下推
});
});
//1,2
接下来是原理实现 spawn
函数就是自动执行器
async function fn(args) {
// ...
}
// 等同于下面代码
function fn(args) {
return spawn(function* () {
});
}
function spawn(genFn){
return new Promise((resolve, reject) => {
const gen = genFn();
function step(nextF) {
let next;
try {
next = nextFn();
} catch (e) {
return reject(e);
}
if (next.done) {
return resolve(next.value);
}
Promise.resolve(next.value).then(
function (v) {
step(function () {
return gen.next(v);
});
},
function (e) {
step(function () {
return gen.throw(e);
});
}
);
}
step(function () {
return gen.next(undefined);
});
});
}
到这里就结束了,更多作为自我学习,希望对你有所帮助
原文链接:https://juejin.cn/post/7318083950856241162 作者:ZhaiMou