美文网首页
JavaScript回调方式

JavaScript回调方式

作者: wwmin_ | 来源:发表于2018-11-30 23:47 被阅读11次

异步

1.事件实现异步
class Eventer {
  map = null;
  constructor() {
    this.map = {};
  }
  add(name, fn) {
    if (this.map[name]) {
      this.map[name].push(fn);
      return;
    }
    this.map[name] = [fn];
    return this; //返回实例,实现链式调用
  }
  emit(name, ...args) {
    this.map[name].forEach(fn => {
      fn(...args);
    });
    return this;
  }
}

let e = new Eventer();
e.add("hello", (err, name) => {
  if (err) {
    console.log(err);
    return;
  }
  console.log(name);
}).emit('hello', '发生了错误').emit('hello', null, "hello node.js");
2.观察者模式
function create(
  fn: (param: IObserverParam) => void
): (param: IObserverParam) => (param: IObserverParam) => void {
  let ret = false;
  return ({ next, complete, error }) => {
    function nextFn(...args) {
      if (ret) {
        return;
      }
      next(...args);
    }
    function completeFn(...args) {
      complete(...args);
      ret = true;
    }
    function errorFn(...args) {
      error(...args);
    }
    fn({ next: nextFn, complete: completeFn, error: errorFn });
    return () => (ret = true);
  };
}

interface IObserverParam {
  next: Function;
  complete: Function;
  error: Function;
}
let observer = create(observer => {
  setTimeout(() => {
    observer.next(1);
  }, 1000);
  observer.next(2);
  observer.complete(3);
});
const subject: IObserverParam = {
  next: value => {
    console.log(value);
  },
  complete: console.log,
  error: console.log
};

var unsubscribe = observer(subject);
3.promise异步
const getName = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("nodejs");
  }, 1000);
});
getName.then(res => {
  console.log(res);
});
Promise.all([getName,getName]).then(console.log).catch(console.log);
Promise.race([getName,getName]).then(console.log).catch(console.log);
4.async/await
async function func(s: string) {
  return s;
}
// 或者
function func(s: string) {
  return Promise.resolve(s);
}
function log(res) {
  console.log(res);
  return res; // 继续返回promise
}
func("a")
  .then(log) // a
  .then(log) // a
  .then(log) // a
  .then(log); // a

相关文章

  • JavaScript回调方式

    异步 1.事件实现异步 2.观察者模式 3.promise异步 4.async/await

  • JavaScript异步之Promise

    传统的JavaScript异步通常基于回调实现,但回调方式有两个重要的缺点: 不便于调试:由于回调函数是基于事件队...

  • JavaScript系列之回调函数callback

    JavaScript系列之回调函数callback JavaScript回调函数的使用是很常见的,引用官方回调函数...

  • Koa学习笔记#1

    Koa的执行过程 背景:JavaScript为了实现异步编程,传统的方式有回调函数、事件监听等。所谓回调函数,就是...

  • Promise快速上手

    概述 回调函数是JavaScript异步编程的根基,但如果我们直接使用传统回调方式去完成复杂的异步流程,就无法避免...

  • 含答案的面试题总结

    1. 说说JavaScript中有哪些异步编程方式? 1. 回调函数 回调函数是异步编程的基本方法。其优点是易编写...

  • JavaScript 之 Promise

    开始之前 JavaScript是单线程语言,所以都是同步执行的,要实现异步就得通过回调函数的方式,但是过多的回调会...

  • Javascript Promise基础知识

    我们在之前的文章中简述了一下JS中的回调函数以及实现方式浅谈JavaScript的回调函数,其中谈到了promis...

  • JavaScript Promise简介

    我们在之前的文章中简述了一下JS中的回调函数以及实现方式浅谈JavaScript的回调函数,其中谈到了promis...

  • javascript回调函数

    javascript回调函数很玄幻。 jquery 中大量使用了回调函数。直到现在才看懂 普通回调函数 匿名回调函...

网友评论

      本文标题:JavaScript回调方式

      本文链接:https://www.haomeiwen.com/subject/fkikcqtx.html