您现在的位置是:首页 >其他 >ES6(Generator函数异步、async、class类)网站首页其他
ES6(Generator函数异步、async、class类)
一、Generator函数异步
1. 概念:
异步:先按顺序执行同步,需要某些条件完成才能返回来继续执行的叫异步
回调函数(callback函数):把异步需要某些条件完成才能执行的效果封装在一个函数(就是回调函数)
//node中的fs模块
fs.readFile('/etc/passwd', 'utf-8', function (err, data) {
if (err) throw err;
console.log(data);
});
2. Generator 函数的数据交换和错误处理(不太理解)
通过next给函数中输入数据:
作为上一次异步任务的返回结果:也就是说:当前参数2就是上一次执行next继续挂起操作的返回值:yield x + 2=2:此时返回y值
function* gen(x){ var y = yield x + 2; return y; } var g = gen(1); g.next() // { value: 3, done: false } g.next(2) // { value: 2, done: true }
部署错误处理代码,捕获函数体外抛出的错误:
通过在函数内部设置try...catch进行捕获
函数外直接调用throw就可以被获取
function* gen(x){ try { var y = yield x + 2; } catch (e){ console.log(e); } return y; } var g = gen(1); g.next(); g.throw('出错了'); // 出错了
二、async
1.含义
Generator 函数的语法糖:
async
函数就是将 Generator 函数的星号(*
)替换成async
,将yield
替换成await
async
函数的返回值是 Promise 对象
const fs = require('fs');
const readFile = function (fileName) {
return new Promise(function (resolve, reject) {
fs.readFile(fileName, function(error, data) {
if (error) return reject(error);
resolve(data);
});
});
};
const gen = function* () {
const f1 = yield readFile('/etc/fstab');
const f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
//替换上卖弄的generator函数编译方式
const asyncReadFile = async function () {
const f1 = await readFile('/etc/fstab');
const f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
2.基本用法
async
函数返回一个 Promise 对象,可以使用then
方法添加回调函数。当函数执行的时候,一旦遇到await
就会先返回,等到异步操作完成,再接着执行函数体内后面的语句
async function getStockPriceByName(name) {
const symbol = await getStockSymbol(name);
const stockPrice = await getStockPrice(symbol);
return stockPrice;
}
getStockPriceByName('goog').then(function (result) {
console.log(result);
});
函数返回 的promise对象,async内部的return语句返回值,会成为then方法回调函数的参数
async function f() {
return 'hello world';
}
f().then(v => console.log(v))
// "hello world"
4. await命令
正常情况下,
await
命令后面是一个 Promise 对象,返回该对象的结果。如果不是 Promise 对象,就直接返回对应的值
async function f() {
// 等同于
// return 123;
return await 123;
}
f().then(v => console.log(v))
// 123
5. 错误处理
如果
await
后面的异步操作出错,那么等同于async
函数返回的 Promise 对象被reject
async function f() {
await new Promise(function (resolve, reject) {
throw new Error('出错了');
});
}
f()
.then(v => console.log(v))
.catch(e => console.log(e))
// Error:出错了
await
命令后面的Promise
对象,运行结果可能是rejected
,所以最好把await
命令放在try...catch
代码块中
async function f() {
try {
await new Promise(function (resolve, reject) {
throw new Error('出错了');
});
} catch(e) {
}
return await('hello world');
}
三、Class基本语法
1.由来
语法糖:
class
写法只是让对象原型的写法更加清晰、更像面向对象编程的语法
//ES5中原型添加方法
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
//直接利用类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
类的本质就是函数:类本身就指向构造函数,使用必须通过new进行实例化
class Point {
// ...
}
typeof Point // "function"
Point === Point.prototype.constructor // true
class Bar {
doStuff() {
console.log('stuff');
}
}
const b = new Bar();
b.doStuff() // "stuff"
注意:类中的方法不能枚举
class Point {
constructor(x, y) {
// ...
}
toString() {
// ...
}
}
Object.keys(Point.prototype)
// []如果上面是ES5中构造函数就可以枚举:['toString']
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]
2. constructor() 方法
constructor()
方法是类的默认方法,类必须有constructor()
方法
class Point {
}
// 等同于
class Point {
constructor() {}
}
3. 静态方法
类中添加方法时候前面存在static:表示是静态方法,不会被实例继承
class Foo {
static classMethod() {
return 'hello';
}
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function
4.类的继承
通过
extends
关键字实现继承,让子类继承父类的属性和方法
class Point {
}
class ColorPoint extends Point {
}
super
在这里表示父类的构造函数,用来新建一个父类的实例对象class Point { /* ... */ } class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y) this.color = color; } toString() { return this.color + ' ' + super.toString(); // 调用父类的toString() } }
必须在
constructor()
方法中调用super()
,否则就会报错如果不调用
super()
方法,子类就得不到自己的this
对象。class Point { constructor(x, y) { this.x = x; this.y = y; } } class ColorPoint extends Point { constructor(x, y, color) { this.color = color; // ReferenceError super(x, y); this.color = color; // 正确 } }