JS - ECMAScript2015(ES6)新特性

友情提示:本文仅mark几个常用的新特性,详细请参见:ES6入门 - ryf

解构赋值

  • 只要等号右边的值不是对象或数组,就先将其转为对象。
  • 由于undefined和null无法转为对象,所以对其解构赋值,会报错

Promise

引出

  • 回调地狱
  • 多个异步回调难以维护和控制的问题

设计思想:所有异步任务都返回一个 Promise 实例。

var p = new Promise(f1);
p.then(f2);

回调函数f1完成后,执行回调函数f2。(添加回调函数通过then()方法)

Promise 对象通过自身的状态,来控制异步操作。

  • 异步操作未完成(pending)
  • 异步操作成功(fulfilled)
  • 异步操作失败(rejected)

Promise 实例的状态变化只可能发生一次:

  • 异步操作成功,Promise 实例传回一个值(value),状态变为 fulfilled
  • 异步操作失败,Promise 实例抛出一个错误(error),状态变为 rejected
var p = new Promise(function (resolve, reject) {
  // ...
  if (/* 异步操作成功 */){
    resolve(value);
  } else { /* 异步操作失败 */
    reject(new Error());
  }
});
  • resolve:将Promise实例的状态从“未完成”变为“成功”(pending-->fulfilled),在异步操作成功时调用,并将异步操作的结果作为参数传出
  • reject:将Promise实例的状态从“未完成”变为“失败”(pending-->rejected),在异步操作失败时调用,并将异步操作的错误作为参数传出

resolve 和 reject 均由 JavaScript 引擎提供,无需自己实现。 

注意:

  • Promise 的回调函数属于异步任务,会在同步任务之后执行。
  • Promise 的回调函数不是正常的异步任务,而是微任务(microtask) 

正常任务追加到下一轮事件循环,微任务追加到本轮事件循环。所以,微任务的执行时间一定早于正常任务。

setTimeout(function() {
  console.log(1);
}, 0);

new Promise(function (resolve, reject) {
  resolve(2);
}).then(console.log);

console.log(3);

//  3 2 1

参考

Promise对象ES6 - Promise - ryfeng

猜你喜欢

转载自www.cnblogs.com/wjcx-sqh/p/9363610.html