11.Generator函数
2020-06-28 本文已影响0人
web_jianshu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body></body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
let p1 = () => {
return new Promise((resolve, reject) => {
$.get("http://127.0.0.1:5000/api/1", res => {
resolve(res);
reject(res);
});
});
};
let p2 = msg => {
return new Promise((resolve, reject) => {
$.get("http://127.0.0.1:5000/api/2", { msg: msg }, res => {
resolve(res);
});
});
};
// p1()
// .then(res => {
// console.log(res);
// return p2(123);
// })
// .then(res => {
// console.log(res);
// });
// let all = Promise.all([p1(), p2()]);
// all.then(res => {
// console.log(res);
// });
// 假如:上面两个异步是封装在一个函数当中
// 使用generator函数实现了异步同步的书写
// 满足条件:p1返回结果当作p2的参数
// Generator函数是一个普通函数,但是有两个特征.一是,function关键字与函数名之间有一个星号
// 二是,函数体内部使用yield表达式, 定义不同的内部状态(yield在英语里的意思就是“产出”)
// 我们把需要做异步的代码放在yield表达式后面
// 定义Generator函数
// function* getAll() {
// // generator函数体内部代码通过迭代器的next方法调用执行
// let p1val = yield p1(); // 调用next迭代generator函数
// console.log("p1val", p1val); // p1val是调用第二个next传进来的
// let p2val = yield p2(p1val);
// // 还有其他代码,必须等yield代码执行结束
// }
// // 调用Generator函数 返回Generator函数生成的对象(迭代器)
// let all = getAll();
// console.log(all); // 迭代器
// console.log(all.next()); // {value: Promise, done: false}
// console.log(all.next()); // {value: Promise, done: false}
// console.log(all.next()); // {value: undefined, done: true}
// 表示执行第一个yield后面的异步方法得到value值为Promise实例对象(某一个状态)
// done 为 false代表后面还有yield 当前generator函数还没有执行完成
// true代表当前generator函数里面所有异步方法全部执行结束
// all.next().value.then(res1 => {
// console.log('res1', res1);
// all.next(res1).value.then(res2 => {
// console.log(res2);
// }).catch(err => {
// console.log(err);
// })
// }).catch(err => {
// console.log(err);
// })
// async 函数是 ES7(babel 支持)引入的 Generator 函数的语法糖
// p1()必须是一个Promise对象 ,如果不是就会使用 Promise构造函数来包裹 ,并执行resolve
async function getAll() {
let p1val = await p1();
// .then(res => {
// console.log('success', res);
// }).catch(err => {
// console.log('err', err);
// }) // p1执行了resolve之后,主动的调用next await返回值p1val永远是调用resolve结果
console.log("await", p1val);
let p2val = await p2(p1val);
console.log(p2val);
// 还有其他代码,必须等yield代码执行结束
// await与.catch相反 相当于.then第一个回调函数的结果
}
getAll();
</script>
