2. 程式人生 > >前端雜談: 如何實現一個 Promise?

前端雜談: 如何實現一個 Promise?

阿新 • • 發佈：2018-12-13

前端雜談: 如何實現一個 Promise?

首先, 什麼是 Promise?

A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it’s not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.

關鍵語句: Promise 是一個在將來某個時刻產生一個單一結果的物件. 通俗一點來說, Promise 代表了一個值, 但是這個值我們並不確定什麼時候會被返回.

A promise is an object that may produce a single value some time in the future.

簡單看看 Promise 的歷史

  • Promise 在 1980 年代被創建出來

  • 在 1988 年正式得名: Promise

  • 已經有很多人瞭解到了 Promise, 但是人們還是堅持使用 node.js 中提倡的以回撥函式首個引數傳 error 物件的方式處理非同步程式碼.

  • Dojo 首次大規模的使用了 Promise , 相應的 Promise/A 被提出用以規範 Promise 的實現

  • JQuery 開始使用 Promise 並真正使 Promise 廣為人知

  • JQuery 沒有實現部分 Promise 的功能, 這也導致了 Promie/A+ 標準的產生

  • ES6 正式引入了 Promise,並且和已有的實現了 Promise/A 規範的 library 相相容

實現 Promise 之前, 讓我們看看 Promise 有哪些規範

  1. Promise 是一個 thenable 物件, 也就是說 Promise 有一個 .then() 方法
  2. 一個 pending 狀態的 Promise 可以進入 fulfilled 和 rejected 狀態
  3. promise 一旦進入 fulfilled 或 rejected 狀態, 不可再改變其狀態
  4. 一旦 promise 改變了其狀態, 它筆芯有一個值(這個值也可能是 undefined)

開始實現一個 Promise

首先, 讓我們看看一段最普通的非同步程式碼:

// 非同步方法定義
var basicAsyncFunc = function(callback) {
  setTimeout(function() {
    var randomNumber = Math.random()
    if (randomNumber > 0.5) {
      callback(null, randomNumber)
    } else {
      callback(new Error('bad luck...'))
    }
  }, 1000)
}

// 非同步方法呼叫
basicAsyncFunc((err, result) => {
  if (err) {
    console.log(`the reason fail is: ${err}`)
    return
  }
  console.log(`success get result: ${result}`)
})

按照 Promise 的規範定義, 理想中 Promise 的呼叫方式為:

// Promise 形式的非同步方法定義
var promiseAsyncFunc = function() {}

// Promise 形式的非同步方法呼叫
promiseAsyncFunc.then(
  data => {
    console.log(`success get result: ${data}`)
  },
  err => {
    console.log(`the reason fail is: ${err}`)
  }
)

按照這個理想當中的呼叫方式, 讓我們寫出第一版程式碼.

第一版 Promise：能儲存回撥方法

// Promise 形式的非同步方法定義
var promiseAsyncFunc = function() {
  var fulfillCallback
  var rejectCallback

  setTimeout(() => {
    var randomNumber = Math.random()
    if (randomNumber > 0.5) fulfillCallback(randomNumber)
    else rejectCallback(randomNumber)
  }, 1000)
  return {
    then: function(_fulfillCallback, _rejectCallback) {
      fulfillCallback = _fulfillCallback
      rejectCallback = _rejectCallback
    }
  }
}

// Promise 形式的非同步方法呼叫
promiseAsyncFunc().then(fulfillCallback, rejectCallback)

我們的思路是在 .then() 方法中, 將 fullfill 和 reject 結果的回撥函式儲存下來, 然後在非同步方法中呼叫. 因為是非同步呼叫, 根據 event-loop 的原理, promiseAsyncFunc().then(fulfillCallback, rejectCallback) 傳入的 callback 在非同步呼叫結束時一定是已經賦值過了.

第二版 Promise：實建構函式

當前我們的實現 Promise 中，非同步邏輯程式碼和 Promise 的程式碼是雜糅在一起的，讓我們將其區分開：

var promiseAsyncFunc = function() {
  var fulfillCallback
  var rejectCallback

  return {
    fulfill: function(value) {
      if (fulfillCallback && typeof fulfillCallback === 'function') {
        fulfillCallback(value)
      }
    },
    reject: function(err) {
      if (rejectCallback && typeof rejectCallback === 'function') {
        rejectCallback(err)
      }
    },
    then: function(_fulfillCallback, _rejectCallback) {
      fulfillCallback = _fulfillCallback
      rejectCallback = _rejectCallback
    }
  }
}

let ownPromise = function(asyncCall) {
  let promise = promiseAsyncFunc()
  asyncCall(promise.fulfill, promise.reject)
  return promise
}

// Promise 形式的非同步方法呼叫
ownPromise(function(fulfill, reject) {
  setTimeout(() => {
    var randomNumber = Math.random()
    if (randomNumber > 0.5) fulfill(randomNumber)
    else reject(randomNumber)
  }, 1000)
})

我們新定義了一個方法 ownPromise() 用於建立 Promise，並在promiseAsyncFunc() 中暴露出 fulfill 和 reject 介面方便非同步程式碼去呼叫。

這裡有一個問題，我們在呼叫 ownPromise()後得到了 promise 例項，此時我們可以直接呼叫 fulfill()，reject()這兩個方法，而理論上我們應該只應暴露 promise 的then()方法。所以我們利用閉包將這兩個方法隱藏：

var promiseAsyncFunc = function() {
  var fulfillCallback
  var rejectCallback

  return {
    fulfill: function(value) {
      if (fulfillCallback && typeof fulfillCallback === 'function') {
        fulfillCallback(value)
      }
    },
    reject: function(err) {
      if (rejectCallback && typeof rejectCallback === 'function') {
        rejectCallback(err)
      }
    },
    promise: {
      then: function(_fulfillCallback, _rejectCallback) {
        fulfillCallback = _fulfillCallback
        rejectCallback = _rejectCallback
      }
    }
  }
}

let ownPromise = function(asyncCall) {
  let defer = promiseAsyncFunc()
  asyncCall(defer.fulfill, defer.reject)
  return defer.promise
}

// Promise 形式的非同步方法呼叫
ownPromise(function(fulfill, reject) {
  setTimeout(() => {
    var randomNumber = Math.random()
    if (randomNumber > 0.5) fulfill(randomNumber)
    else reject(randomNumber)
  }, 1000)
})

第三版 Promise: 支援狀態管理

為了實現規範中對於 Promise 狀態變化的要求, 我們需要為 Promise 加入狀態管理, 這一步較為簡單, 讓我們看程式碼:

const PENDING = Symbol('pending')
const FULFILLED = Symbol('fulfilled')
const REJECTED = Symbol('rejected')

// Promise 形式的非同步方法定義
var promiseAsyncFunc = function() {
  var status = PENDING
  var fulfillCallback
  var rejectCallback

  return {
    fulfill: function(value) {
      if (status !== PENDING) return
      if (typeof fulfillCallback === 'function') {
        fulfillCallback(value)
        status = FULFILLED
      }
    },
    reject(error) {
      if (status !== PENDING) return
      if (typeof rejectCallback === 'function') {
        rejectCallback(error)
        status = REJECTED
      }
    },
    promise: {
      then: function(_fulfillCallback, _rejectCallback) {
        fulfillCallback = _fulfillCallback
        rejectCallback = _rejectCallback
      }
    }
  }
}

let ownPromise = function(asyncCall) {
  let defer = promiseAsyncFunc()
  asyncCall(defer.fulfill, defer.reject)
  return defer.promise
}

// Promise 形式的非同步方法呼叫
ownPromise(function(fulfill, reject) {
  setTimeout(() => {
    var randomNumber = Math.random()
    if (randomNumber > 0.5) fulfill(randomNumber)
    else reject(randomNumber)
  }, 1000)
}).then(data => console.log(data), err => console.log(err))

這段程式碼中我們用到了 Symbol 來表示狀態常量, 對 Symbol 不瞭解的同學可以看這裡

為了判斷 Promise 的狀態, 我們加入了 fulfill 和 reject 兩個方法。並在其中判斷 promise 當前狀態。如果不是 pending 狀態則直接 return(因為 Promise 狀態只可能改變一次)。

現在我們的 promise 實現了對狀態控制的規範：

  • 只允許改變一次狀態
  • 只能從 pending => fulfilled 或 pending => rejected

但是我們的 Promise 有一個問題: promise 的值沒有被儲存下來。如果 promise 在非同步呼叫完成之後才被呼叫 .then() 方法，則我們無法把非同步呼叫的結果傳遞給回撥函式。為此我們需要為 Promise 加一個 value 欄位：

第四版 Promise: 儲存非同步呼叫的結果

我們為 promise 加入 value 欄位，用於儲存 Promise 的執行結果。

// Promise 形式的非同步方法定義
var promiseAsyncFunc = function() {
  var status = PENDING
  var fulfillCallback
  var rejectCallback
  var value

  return {
    fulfill: function(_value) {
      if (status !== PENDING) return
      value = _value
      status = FULFILLED
      if (typeof fulfillCallback === 'function') {
        fulfillCallback(value)
      }
    },
    reject(error) {
      if (status !== PENDING) return
      value = error
      status = REJECTED
      if (typeof rejectCallback === 'function') {
        rejectCallback(error)
      }
    },
    promise: {
      then: function(_fulfillCallback, _rejectCallback) {
        fulfillCallback = _fulfillCallback
        rejectCallback = _rejectCallback
      }
    }
  }
}

這裡我們又發現一個問題，如果一個 Promise 已經是fulfill或reject狀態。我們再呼叫 then() 方法時，傳入的回撥方法永遠不會被呼叫（因為 status 已經不是 pending）。

所以我們需要在 then()方法中對其狀態進行判斷：

// Promise 形式的非同步方法定義
var promiseAsyncFunc = function() {
  var status = PENDING
  var fulfillCallback
  var rejectCallback
  var value

  return {
    fulfill: function(_value) {
      if (status !== PENDING) return
      value = _value
      status = FULFILLED
      if (typeof fulfillCallback === 'function') {
        fulfillCallback(value)
      }
    },
    reject(error) {
      if (status !== PENDING) return
      value = error
      status = REJECTED
      if (typeof rejectCallback === 'function') {
        rejectCallback(error)
      }
    },
    promise: {
      then: function(_fulfillCallback, _rejectCallback) {
        if (status === REJECTED) {
          _rejectCallback(value)
          return
        }
        if (status === FULFILLED) {
          _fulfillCallback(value)
          return
        }
        fulfillCallback = _fulfillCallback
        rejectCallback = _rejectCallback
      }
    }
  }
}

第五版 Promise: 支援鏈式呼叫

為了支援鏈式呼叫，.then() 方法的返回值必須是用 thenable (根據 Promise/A+ 規範, .then() 方法的返回值需要是一個新的 Promise)

為此我們加入一個工具方法 makeThenable()。如果傳入的 value 本身就有 then()方法，則直接返回 value。否則返回一個有 then()方法的物件。 在該物件的 then()方法中，我們根據 promise 的狀態，呼叫不同的回撥方法生成新的 value。

function makeThenable(value， status){
  if(value && typeof value.then === 'function'){
    return value
  }
  if(status === FULFILLED){
    return {
      then: function(fulfillCallback, rejectCallback){
        return makeThenable(fulfillCallback(value), FULFILLED)
      }
    }
  }
  if(status === REJECTED) {
    return {
      then: function(fulfillCallback, rejectCallback){
        return makeThenable(rejectCallback(value), FULFILLED)
      }
    }
  }
}

有了以上的 makeThenable()方法，我們可以在 promise 的fulfill()，reject()回將 value 設定為 thenable:

var promiseAsyncFunc = function() {
  var status = PENDING
  var fulfillCallback
  var rejectCallback
  var value

  return {
    fulfill: function(_value) {
      if (status !== PENDING) return
      value = makeThenable(_value, FULFILLED) // 保證當前promise的value為 thenable
      status = FULFILLED
      if (typeof fulfillCallback === 'function') {
        value.then(fulfillCallback)
      }
    },
    reject(error) {
      if (status !== PENDING) return
      value = makeThenable(error, REJECTED) 、、  // 保證當前value為 thenable
      status = REJECTED
      if (typeof rejectCallback === 'function') {
        value.then(null, rejectCallback)
      }
    },
    promise: {
      then: function(){}
    }
  }
}

接下來讓我們看 then()方法。為了返回一個新的 promise，我們首先得建立一個新的 promise。其次當前 promise 在fulfill() 或 reject()時，應該呼叫新的 promise 的fullfill() 或 reject()方法。所以我們在將 fulfullCallback和rejectCallback賦值給當前 promise 時，將其包裝一下。程式碼如下：

    promise: {
      then: function(_fulfillCallback, _rejectCallback) {
        let newPromiseAsyncFunc = promiseAsyncFunc()
        let fulfillFunc = function(value) {
          newPromiseAsyncFunc.fulfill(_fulfillCallback(value))
        }
        let rejectFunc = function(err) {
          newPromiseAsyncFunc.fulfill(_rejectCallback(err))
        }
        if (status === PENDING) {
          fulfillCallback = fulfillFunc
          rejectCallback = rejectFunc
        } else {
          value.then(fulfillFunc, rejectFunc)
        }
        return newPromiseAsyncFunc.promise
      }
    }

如此，我們變得到了一個可以鏈式呼叫的 promise。讓我們來測試一下：

const PENDING = Symbol('pending')
const FULFILLED = Symbol('fulfilled')
const REJECTED = Symbol('rejected')

function makeThenable(value, status) {
  if (value && typeof value.then === 'function') {
    return value
  }
  if (status === FULFILLED) {
    return {
      then: function(fulfillCallback, rejectCallback) {
        return makeThenable(fulfillCallback(value), FULFILLED)
      }
    }
  }
  if (status === REJECTED) {
    return {
      then: function(fulfillCallback, rejectCallback) {
        return makeThenable(rejectCallback(value), FULFILLED)
      }
    }
  }
}

// Promise 形式的非同步方法定義
var promiseAsyncFunc = function() {
  var status = PENDING
  var fulfillCallback
  var rejectCallback
  var value

  return {
    fulfill: function(_value) {
      if (status !== PENDING) return
      value = makeThenable(_value, FULFILLED)
      status = FULFILLED
      if (typeof fulfillCallback === 'function') {
        value.then(fulfillCallback)
      }
    },
    reject(error) {
      if (status !== PENDING) return
      value = makeThenable(error, REJECTED)
      status = REJECTED
      if (typeof rejectCallback === 'function') {
        value.then(null, rejectCallback)
      }
    },
    promise: {
      then: function(_fulfillCallback, _rejectCallback) {
        let newPromiseAsyncFunc = promiseAsyncFunc()
        let fulfillFunc = function(value) {
          newPromiseAsyncFunc.fulfill(_fulfillCallback(value))
        }
        let rejectFunc = function(err) {
          newPromiseAsyncFunc.fulfill(_rejectCallback(err))
        }
        if (status === PENDING) {
          fulfillCallback = fulfillFunc
          rejectCallback = rejectFunc
        } else {
          value.then(fulfillFunc, rejectFunc)
        }
        return newPromiseAsyncFunc.promise
      }
    }
  }
}

let ownPromise = function(asyncCall) {
  let defer = promiseAsyncFunc()
  asyncCall(defer.fulfill, defer.reject)
  return defer.promise
}

let testChainedPromise = ownPromise(function(fulfill, reject) {
  setTimeout(() => {
    var randomNumber = Math.random()
    if (randomNumber > 0.5) fulfill(randomNumber)
    else reject(randomNumber)
  }, 1000)
})
  .then(
    data => {
      console.log(data)
      return 'return value in then1 fulfill'
    },
    err => {
      console.log(err)
      return 'return value in then1 reject'
    }
  )
  .then(
    data => {
      console.log(data)
      return 'return value in then2 fulfill'
    },
    err => {
      console.log(err)
      return 'return value in then2 reject'
    }
  )
  .then(
    data => {
      console.log(data)
    },
    err => {
      console.log(err)
    }
  )

/**
console output:

0.9931984611850693
return value in then1 fulfill
return value in then2 fulfill
*/

第六版 Promise: Error handling

這裡我們只對非同步呼叫和fulfill 回撥中丟擲的 error 進行處理。

首先是非同步呼叫部分,我們將其 try catch 起來，在發生異常時呼叫 reject 方法，並將異常作為引數傳入。

let ownPromise = function(asyncCall) {
  let defer = promiseAsyncFunc()
  try {
    asyncCall(defer.fulfill, defer.reject)
  } catch (e) {
    defer.reject(e)
  }
  return defer.promise
}

然後是 fulfill 中可能出現的異常。我們對fulfillCallback(value)可能出現的異常進行捕獲，並將異常傳遞給rejectCallback。

function makeThenable(value, status) {
  if (value && typeof value.then === 'function') {
    return value
  }
  if (status === FULFILLED) {
    return {
      then: function(fulfillCallback, rejectCallback) {
        try {
          let newValue = fulfillCallback(value)
          return makeThenable(newValue, FULFILLED)
        } catch (e) {
          return makeThenable(rejectCallback(e), FULFILLED)
        }
      }
    }
  }
  if (status === REJECTED) {
    return {
      then: function(fulfillCallback, rejectCallback) {
        return makeThenable(rejectCallback(value), FULFILLED)
      }
    }
  }
}

最後讓我們對完整的程式碼進行測試：

const PENDING = Symbol('pending')
const FULFILLED = Symbol('fulfilled')
const REJECTED = Symbol('rejected')

function makeThenable(value, status) {
  if (value && typeof value.then === 'function') {
    return value
  }
  if (status === FULFILLED) {
    return {
      then: function(fulfillCallback, rejectCallback) {
        try {
          let newValue = fulfillCallback(value)
          return makeThenable(newValue, FULFILLED)
        } catch (e) {
          return makeThenable(rejectCallback(e), FULFILLED)
        }
      }
    }
  }
  if (status === REJECTED) {
    return {
      then: function(fulfillCallback, rejectCallback) {
        return makeThenable(rejectCallback(value), FULFILLED)
      }
    }
  }
}

// Promise 形式的非同步方法定義
var promiseAsyncFunc = function() {
  var status = PENDING
  var fulfillCallback
  var rejectCallback
  var value

  return {
    fulfill: function(_value) {
      if (status !== PENDING) return
      value = makeThenable(_value, FULFILLED)
      status = FULFILLED
      if (typeof fulfillCallback === 'function') {
        value.then(fulfillCallback)
      }
    },
    reject(error) {
      if (status !== PENDING) return
      value = makeThenable(error, REJECTED)
      if (typeof rejectCallback === 'function') {
        value.then(null, rejectCallback)
      }
      status = REJECTED
    },
    promise: {
      then: function(_fulfillCallback, _rejectCallback) {
        let newPromiseAsyncFunc = promiseAsyncFunc()
        let fulfillFunc = function(value) {
          newPromiseAsyncFunc.fulfill(_fulfillCallback(value))
        }
        let rejectFunc = function(err) {
          newPromiseAsyncFunc.fulfill(_rejectCallback(err))
        }
        if (status === PENDING) {
          fulfillCallback = fulfillFunc
          rejectCallback = rejectFunc
        } else {
          value.then(fulfillFunc, rejectFunc)
        }
        return newPromiseAsyncFunc.promise
      }
    }
  }
}

let ownPromise = function(asyncCall) {
  let defer = promiseAsyncFunc()
  try {
    asyncCall(defer.fulfill, defer.reject)
  } catch (e) {
    defer.reject(e)
  }
  return defer.promise
}

let testChainedPromise = ownPromise(function(fulfill, reject) {
  throw Error('here is an error in asyncCall')
  setTimeout(() => {
    var randomNumber = Math.random()
    if (randomNumber > 0.5) fulfill(randomNumber)
    else reject(randomNumber)
  }, 1000)
})
  .then(
    data => {
      console.log(data)
      return 'return value in then1 fulfill'
    },
    err => {
      console.log(err.message)
      return 'return value in then1 reject'
    }
  )
  .then(
    data => {
      console.log(data)
      throw Error('here is an error in fulfill1')
      return 'return value in then2 fulfill'
    },
    err => {
      console.log(err.message)
      return 'return value in then2 reject'
    }
  )
  .then(
    data => {
      console.log(data)
    },
    err => {
      console.log(err.message)
    }
  )


// console out:
Error: here is an error in asyncCall
return value in then1 reject
Error: here is an error in fulfill1
return value in then2 reject

總結

以上就是我們對於 Promise 的一個簡單的實現，實現思路主要參考了 Q-A promise library for javascript。該實現的 Promise 功能較為簡陋，僅實現了部分 api/規範。有任何意見和建議歡迎在評論區交流 ；）

進一步閱讀 && 引用

對於 Promise 使用以及error handle 的講解：

https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261

Promise 實現庫之一: Q 對於 Promise 實現的講解：

https://github.com/kriskowal/q/blob/master/design/README.md

想了解更多 前端 和 資料視覺化 ?

這裡是我的 前端、D3.js 、 資料視覺化 的 github 地址, 歡迎 star & fork :tada:

ssthouse-blog

如果覺得本文不錯的話, 不妨點選下面的連結關注一下 : )

github 主頁

知乎專欄

掘金

想直接聯絡我 ?

郵箱: [email protected]

相關推薦

前端雜談: 如何實現一個 Promise?

前端雜談: 如何實現一個 Promise? 首先, 什麼是 Promise? A promise is an object that may produce a single value some time in the future: either a resolved value, or a reaso

老生常談-實現一個Promise

前言 在寫這個promise之前，希望你已經對es6中的Promise很熟悉了，概念性和基礎的東西就不再講了，不懂的同學可以去看看阮一峰老師的es6教程. 我主要按以下5個步驟來一步一步實現，非同步的實現我放在了後面，所以前面幾步暫不考慮 實現一個基本的MyPromise 實現then的鏈式呼叫

實現一個Promise(基於Promise/A+規範)

前言 相信大家經常使用Promise，或者使用Generator、asnyc/await等非同步解決方案，網上的Promise原理也遍地開花。 一直以來想抽出時間也寫一寫Promise實現，但是平常工作也是忙的不可開交，正好元旦放了3天假期，休息了2天半，抽出半天時間來看一看Promise。 如何使用Pr

Promise進階——如何實現一個Promise庫

概述 從上次更新Promise/A+規範後，已經很久沒有更新部落格了。之前由於業務需要，完成了一個TypeScript語言的Promise庫。這次我們來和大家一步一步介紹下，我們如何實現一個符合Promise/A+規範的Promise庫。 如果對Promise/A+規範還不太瞭解的同學，建議先看看上一篇部

解析 Promise 原理，實現一個Promise

概述 這篇文章旨在解析 Promise的非同步實現原理，並且以 ES6中的 Promise 為藍本實現一個簡單的 Promise。 通過自己動手實現一個 Promise 物件，可以熟悉很多可能不知道的 Promise 細節，同時也能對非同步的理解更提升一步。

嘗試去實現一個Promise

function resolve_promise_value(promise,value) {//PromiseA+的實現 var then; /* ret false 說明沒有執行promise._resolve裡的函式

實現一個Promise-polyfill

Promise Promise是ES6標準提供的一個非同步操作的很好的語法糖，對於原本的回撥函式模式進行了封裝，實現了對於非同步操作的鏈式呼叫。並且配上generator以及async語法糖來使用更加方便。 雖然Promise當前在很多瀏覽器上都已經得到了支

手寫實現一個promise

function myPromise (callback) { let self = this; self.status = 'pending'; self.value = undefined; self.reason = undefined; self.fullF

手動實現一個Promise

ES6中實現的Promise是 Promise/A+ 規範。 首先，有三種狀態：pending ，fulfilled， rejected。 const PENDING = 'PENDING' const FULFILLED = 'FULFILLE

登陸一個系統時，前端js實現的驗證，記住密碼等功能

con hold div plain class submit nts 設置 發生 記住密碼部分： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

如何用原生JS實現一個簡單的promise

　　　我又又又回來了，最近真是累的跟狗一樣，急需一個大保健回覆一下子精力 　　　我現在是一邊喝著紅牛一邊寫著部落格，好了好了，不扯了，迴歸整體好吧 　　　先簡單來說一下啥是promise吧 　　　它是什麼？Promise是一個方案，用來解決多層回撥巢狀的解決方案。它現在是ES6的原生物件。 　　 &n

手摸手教你自己動手實現一個前端路由

前言 用過現代前端框架的同學，對前端路由一定不陌生, vue, react, angular 都有自己的 router, 那麼你對 router 的工作原理了解嗎？ 如果還不瞭解, 那麼請跟我一起來手寫一個簡單的前端路由, 順便了解一下. 實現路由的2種方式 hash模式

【JavaScript進階】深入理解JavaScript中ES6的Promise的作用並實現一個自己的Promise

  1.Promise的基本使用 1 // 需求分析： 封裝一個方法用於讀取檔案路徑，返回檔案內容 2 3 const fs = require('fs'); 4 const path = require('path'); 5 6 7 /** 8 * 把一個回

自己動手實現一個前端路由

單頁面應用利用了JavaScript動態變換網頁內容,避免了頁面過載,提供了流暢的使用者體驗;路由則提供了瀏覽器地址變化,網頁內容也跟隨變化,兩者結合起來則為我們提供了體驗良好的單頁面web應用 前端路由實現方式 前端路由需要實現三個功能:①瀏覽器地址變化,切換頁面;②點選瀏覽器【後退】、【前進

ES6——手把手實現一個簡單的Promise

想要實現一個Promise，首先當然得先知道這個東西是什麼，Promise物件是ES6給我們提供的一個解決非同步回撥的一個語法糖，簡單說就是一個容器，裡面儲存著某個未來才會結束的事件（通常是一個非同步操作）的結果。把非同步操作放入Promise物件中，等到Promise物件中

實現一個自己的promise

這是小弟的一篇開篇小作，如有不當之處，請各位道友批評指正。本文將探討Promise的實現。 一、ES6中的Promise 1、簡介 據說js很早就實現了Promise，我是不知道的，我第

實現一個簡單的Promise

我們可以在chrome開發工具下看下原生 promise 是什麼： new Promise((resolve, reject) => {}) return Promise { [[Pro

用 Promise 實現一個訊息佇列

需求描述 在此篇部落格中，我們的需求如下： 有一個訊息排程器去操作傳送來訊息 但處理訊息花費的事件是不確定的，有多有少 訊息是不斷髮送過來的 這個時候就會出現一種情況：前一條訊息還未執行結束，後一條訊息就被髮送過來了 如果這個時候要求後一條訊息必須在前一條執行完

使用 NodeJs 實現一個本地介面資料系統，無需資料庫，讓前端獨立於後臺開發

使用 NodeJs 實現本地介面系統，解決前後臺開發最後一公里 無資料庫的情況下，實現資料持久化，通過api url返回json 資料，提高前端開發效率！ 專案地址 ：local-ajax-api 下載完成安裝依賴就可使用 背景 前端開發工作中一個

3行程式碼實現一個簡易版promise

前言 作為一個後端過來的同學,剛入門前端的時候,被js種種「反人類」的概念折騰的死去活來的. 其中一個印象比較深刻的,就是promise,感覺實在太難理解了…所有就有了寫個簡單的promise的想法. 希望能幫助到一些跟我一樣,感覺promise很難理解的