ES6的基础知识(三)

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6的基础知识(三)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

promise

@H_360_11@// resolve()会触发then方法第一个回调, reject()会触发then方法第二个回调或catch方法 let p = new PRomise((resolve, reject) => { setTimeout(() => { if (Math.random() > 0.5) { resolve("成功操作"); } else { reject("失败操作"); } }); }); p.then( res => { console.log(res); }, err => { console.log(err); } );

generator

// yield会终止fn()的执行,需要next()方法触发fn()向下执行
function* fn(x) {
  yield x[0];
  yield x[1];
  yield x[2];
}

let res;
let t = fn([1, 2, 3]);
do {
  res = t.next();
  console.log(res);
} while (!res.done);

// 执行结果
// { value: 1, done: false }
// { value: 2, done: false }
// { value: 3, done: false }
// { value: undefined, done: true }

实现promise

// Promise的参数是一个函数async,async()有resolve和reject两个参数
function Promise(async) {
  // 回调函数中this会指向window,需要保存才会指向Promise实例对象
  let _this = this;
  // Promise三种状态,分别为pending,resolved,rejected.状态只能从pending变成resolved或者rejected
  _this.status = "pending";
  _this.val = undefined;
  // 成功回调方法集合
  _this.onResolvedCallbacks = [];
  // 失败回调方法集合
  _this.onRejectedCallbacks = [];
  // 触发resolve()方法异步状态改变成成功, 将会执行成功回调集合中的方法
  function resolve(val) {
    if (_this.status === "pending") {
      _this.status = "resolved";
      _this.val = val;
      _this.onResolvedCallbacks.forEach(item => item(val));
    }
  }
  // 触发reject()方法异步状态改变成失败, 将会执行失败回调集合中的方法
  function reject(val) {
    if (_this.status === "pending") {
      _this.status = "rejected";
      _this.val = val;
      _this.onRejectedCallbacks.forEach(item => item(val));
    }
  }
  // 异常捕获
  try {
    async(resolve, reject);
  } catch (err) {
    reject(err);
  }
}
// then方法有两个参数, 第一个异步成功后执行的函数, 第二个是异步出异常后执行的函数
Promise.prototype.then = function(resolved, rejected) {
  let _this = this;
  if (_this.status === "pending") {
    // 将所有then要执行的方法push到回调函数集合中,在状态改为resolved执行其中的方法
    _this.onResolvedCallbacks.push(resolved);
    // 将所有then要执行的方法push到回调函数集合中,在状态改为rejected执行其中的方法
    _this.onRejectedCallbacks.push(rejected);
  }
  if (_this.status === "resolved") {
    resolved(_this.val);
  }
  if (_this.status === "rejected") {
    rejected(_this.val);
  }
};

实现generator

// 生成器
function fn(val) {
  let i = 0;
  return {
    next() {
      let done = i === val.length;
      let value = val[i++];
      return {
        value,
        done
      };
    }
  };
}

// 迭代器
let it = fn([1, 2, 3]);
let result;
do {
  result = it.next();
  console.log(result);
} while (!result.done);

脚本宝典总结

以上是脚本宝典为你收集整理的ES6的基础知识(三)全部内容,希望文章能够帮你解决ES6的基础知识(三)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。