generator和async |
您所在的位置：网站首页 › async意思 › generator和async |
|
1. generator
generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数（但并不是一个函数），但可以返回多次；
generator由function定义（注意多出的号），并且，除了return语句，还可以用yield返回多次；
next()方法会执行generator的代码，然后，每次遇到yield 语句;就返回一个对象{value: x, done: true/false}，然后“暂停”。返回的value就是yield的返回值，done表示这个generator是否已经执行结束了。如果done为true，则value就是return的返回值；
// 生成器的声明
function* gen() {
console.log('abc');
console.log('1');
console.log('2');
console.log('3');
// 礼让 => 异步
let res = yield 'Green';
//下面打印的res就是yield返回的'Green'
console.log('444', res) // 444 Green
console.log('555')
}
// 获取生成器对象
let generator = gen();
let res = generator.next();
console.log(res); // {value: 'Green', done: false}
generator.next(res.value);
复制代码
2. async-await（ES2017）
async-await是ES2017(ES8)提出的基于Promise的解决异步的最终方案，现在更为常用；
async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。
await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待；
await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行；
如果不是Promise对象：把这个非promise的东西当做await表达式的结果；
// 看似同步代码
async function asyncFn() {
console.log('3');
// await可以控制异步
let res = await new Promise(res => {
console.log('5');
res('数据abc');
})
// 不调用res('数据abc'); 则不执行后续代码
// 等同于.then里面的代码
console.log('4', res); // 也就是说不调用res('数据abc')，本句打印代码不会执行
}
// 同步优先
console.log('1')
asyncFn();
复制代码
2.1 async-await应用--处理没有try的reject异常
原理是参数错误优先规则，自定义一个pretty函数来对promise对象进行预处理 function pretty(promise) { // 中间层处理 , 参数错误优先 return promise.then(res => { return [undefined, res]; })// 处理过以后fulfilled .catch(err => { return [err, undefined]; })// 处理过以后fulfilled } 复制代码使用场景，处理没有try的reject异常 const { log: l } = console; function req() { // 去解决,拒绝 return new Promise((resolve, reject) => { setTimeout(() => { // 数据回来了 let data = Math.random(); if (data 也可以使用以下方法处理没有try的reject异常 window.addEventListener('unhandledrejection', (err) => { err.preventDefault(); // reject(参数) console.log(err.reason, '错误了'); }); 复制代码 3. async-await在forEach循环里的应用使用场景，想要实现每隔1s调用一次函数fn let arr = [1, 2, 3, 4, { name: 'Green', fn() { } }] const { log: l } = console; function req(n) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(n); }, 1000); }) } arr.forEach(async (ele, index, newArr) => { await req(ele); console.log('响应了...', ele, newArr) }) 复制代码结果只等待1s就全部响应完毕 重写forEach进行优化 // 覆盖forEach方法 Array.prototype.forEach = async function (fn) { // 健壮性判断 if (typeof fn !== 'function') throw new Error('必须传递函数'); // 判断this是数组 if (!Array.isArray(this)) throw new Error('this必须是一个数组'); for (let i = 0, len = this.length; i |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |