es6常用语法（二）

Promise 对象

---

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象.

• 基本用法

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

 function timeout(ms) {
   return new Promise((resolve, reject) => {
     setTimeout(resolve, ms, 'done');
   });
 }
 
 timeout(100).then((value) => {
   console.log(value);
 });

Generator 函数的语法

• 基础语法

Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。

function* Test() {
  yield 'start';
  yield 'next';
  return 'end';
}

var hw = Test();
hw.next()
// { value: 'start', done: false }

hw.next()
// { value: 'next', done: false }

hw.next()
// { value: 'end', done: true }

hw.next()
// { value: undefined, done: true }

上面代码定义了一个 Generator 函数helloWorldGenerator，它内部有两个yield表达式（start和next），即该函数有三个状态：star，next 和 return 语句（结束执行）。

yield 表达式,遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值

function* gen() {
  yield  12+10;
  yield  method();
}

• Generator 函数的异步应用

async 函数

async 函数就是 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());
};

由于async函数返回的是 Promise 对象，可以作为await命令的参数。所以，上面的例子也可以写成下面的形式。

//
function timeout(msg,ms) {
  return new Promise((resolve) => {
    setTimeout(function(){
      resolve(msg)
    }, ms);
  });
}
async function asyncPrint(msg, ms) {
  let a = await timeout(msg,ms);
  console.log(a);
}
asyncPrint('ok', 1000);//1s后打印 ok
//await 后也可以直接返回值
function Sync(ms) {
  return ms
}
async function Test(ms) {
  let a =  await Sync(ms);
  console.log(a);
}
Test('ok') //ok

返回 Promise 对象

async function fuc() {
  return 'ok';
}

fuc().then(r => console.log(r))
// 'ok'

错误处理

async function func() {
  await new Promise(function (resolve, reject) {
    throw new Error('出错了');
  });
}

func()
.then(v => console.log(v))
.catch(e => console.log(e))
// Error：出错了

Class语法

ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

• Class 的基本用法

class Super {
    
  //构造方法
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  //静态变量
  static classVar = [];
  //静态方法
  static classMethod() {
    return 'hello';
  }
   // 私有方法
  _priviteMethod(baz) {
      return this.x;
    }
  // 公有方法  
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

• Class 的继承

Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}