Generator 函数是 ES6 提供的一种异步编程解决方案
Generator 函数内部可以封装多个状态, 因此又可以理解为是一个状态机
只需要在普通函数的function后面加上*即可
3.1调用Generator函数后, 无论函数有没有返回值, 都会返回一个迭代器对象,
3.2调用Generator函数后, 函数中封装的代码不会立即被执行
4.1在Generator函数内部使用yield关键字定义状态
4.2并且yield关键字可以让 Generator内部的逻辑能够切割成多个部分。
4.3通过调用迭代器对象的next方法执行一个部分代码,执行哪个部分就会返回哪个部分定义的状态
function* gen() {
console.log("123");
let res = yield "aaa";
console.log(res);
console.log("567");
yield 1 + 1;
console.log("789");
yield true;
}
let it = gen();
// console.log(it);
console.log(it.next());
console.log(it.next("it666"));
// console.log(it.next());
// console.log(it.next());
// 注意点: yield关键字只能在Generator函数中使用, 不能在普通函数中使用
// function say() {
// yield "abc";
// }
// say();
1.让函数返回多个值
/*
function calculate(a, b) {
let sum = a + b;
let sub = a - b;
return [sum, sub];
}
*/
function* calculate(a, b) {
yield a + b;
yield a - b;
}
let it = calculate(10, 5);
console.log(it.next().value);
console.log(it.next().value);
2.用同步的流程来表示异步的操作
/* 回调地狱实现
function request(fn) {
setTimeout(function () {
fn("拿到的数据");
}, 1000);
}
request(function (data) {
console.log("1", data);
request(function (data) {
console.log("2", data);
request(function (data) {
console.log("3", data);
});
});
});
*/
function request() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("拿到的数据");
}, 1000);
});
}
/* promise实现
request().then(function (data) {
console.log(data, 1);
return request();
}).then(function (data) {
console.log(data, 2);
return request();
}).then(function (data) {
console.log(data, 3);
});
*/
//Generator实现
function* gen() {
yield request();
yield request();
yield request();
}
let it = gen();
// console.log(it.next().value);
it.next().value.then(function (data) {
console.log(data, 1);
return it.next().value;
}).then(function (data) {
console.log(data, 2);
return it.next().value;
}).then(function (data) {
console.log(data, 3);
});
3.利用 Generator 函数,可以在任意对象上快速部署 Iterator 接口
/*
Generator 函数特点
1.Generator 函数也是一个函数
2.Generator 函数会返回一个迭代器对象
3.迭代器对象有next方法
4.next方法每次执行都会返回一个对象{value: xxx, done: false}
*/
/*
function* gen() {
yield "aaa";
yield "bbb";
yield "ccc";
}
let it = gen();
// console.log(it);
console.log(it.next());
*/
/*
1.必须有一个叫做[Symbol.iterator]的属性
2.[Symbol.iterator]的属性会返回一个函数
3.[Symbol.iterator]返回的函数执行之后会返回一个可迭代对象
4.[Symbol.iterator]函数返回的对象中又一个名称叫做next的方法
5.next方法每次执行都会返回一个对象{value: xxx, done: false}
*/
/*
let obj = {
name: "lnj",
age: 34,
gender: "man",
[Symbol.iterator](){
let keys = Object.keys(this);
// console.log(keys);
let index = 0;
let that = this;
return {
next(){
if(index < keys.length){
return {value: that[keys[index++]], done: false};
}else{
return {value: undefined, done: true};
}
}
}
}
}
// console.log(obj[Symbol.iterator]);
// let it = obj[Symbol.iterator]();
// console.log(it);
// console.log(it.next());
// console.log(it.next());
// console.log(it.next());
// console.log(it.next());
for(let value of obj){
console.log(value);
}
*/
let obj = {
name: "lnj",
age: 34,
gender: "man"
}
function* gen(){
let keys = Object.keys(obj);
for(let i = 0; i < keys.length; i++){
yield obj[keys[i]];
}
}
obj[Symbol.iterator] = gen;
// console.log(obj[Symbol.iterator]);
let it = obj[Symbol.iterator]();
// console.log(it);
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
async函数是ES8中新增的一个函数, 用于定义一个异步函数
async函数函数中的代码会自动从上至下的执行代码
await操作符只能在异步函数 async function 中使用
await表达式会暂停当前 async function 的执行,等待 Promise 处理完成。
若 Promise 正常处理(fulfilled),其回调的resolve函数参数作为 await 表达式的值,然后继续执行 async function。
function request() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("拿到的数据");
}, 1000);
});
}
/*
function* gen() {
yield request();
yield request();
yield request();
}
let it = gen();
it.next().value.then(function (data) {
console.log(data, 1);
return it.next().value;
}).then(function (data) {
console.log(data, 2);
return it.next().value;
}).then(function (data) {
console.log(data, 3);
});
*/
async function gen() {
let res1 = await request();
console.log(res1, 1);
let res2 = await request();
console.log(res2, 2);
let res3 = await request();
console.log(res3, 3);
}
gen();