JavaScript回調方式

異步

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語言太重要。Javascript語言的執行環境是“單線程”的,如果沒有異步編程,根本...
    呼呼哥閱讀 7,333評論 5 22
  • 一.非阻塞和異步 借用知乎用戶嚴肅的回答在此總結下,同步和異步是針對消息通信機制,同步代表一個client發出一個...
    Daniel_adu閱讀 1,841評論 0 8
  • 歡迎閱讀專門探索 JavaScript 及其構建組件的系列文章的第四章。 在識別和描述核心元素的過程中,我們還分享...
    OSC開源社區閱讀 1,162評論 1 10
  • title: promise總結 總結在前 前言 下文類似 Promise#then、Promise#resolv...
    JyLie閱讀 12,281評論 1 21
  • 一路走來,和很多人都沒了聯系,想想時間過得真快,各自有了屬于自己的生活軌道,沒了交集,所幸還能通過社交平臺知道一些...
    淺淺淺笑痕_閱讀 129評論 0 0