經典Promise面試題----手寫Promise詳細步驟（一）-有解無憂

Promise的封裝–手寫一個Promise–實作基本結構以及resolve、reject結構功能實作！

1. 初始結構的搭建

步驟結構的簡介：
  1：在檔案夾中新建兩個檔案，一個index.html作為入口，另外一個promise.js作為封裝主體函式
  2：引入自定義的Promise.js，來使用自定義手寫的Promise，如果不引入的話，下面實體化的p就是由全域的Promise實體化出來的，
  3：現在我們想要自定義，所以script標簽引入來覆寫掉全域的Promise，于是新建Promise.js檔案，2.3是標準的實體化Promise的代碼結構體，promise內穿一個執行器函式executor，里面含有兩個引數 resolve、 reject
  4：新建Promise.js中先定義覆寫新的Promise，這樣在左側new的時候就不是全域的，而是實體自定義的promise
  5：務必注意：Promise實體化的時候會接收一個實參，執行器函式，所以右側宣告的時候會有個形參exexutor
  6:添加原型then方法，注意then方法中接收兩個實參，都是方法，所以對應右側宣告時會有兩個對應的形參（onResolved，onRejected）

結構圖解：
在這里插入圖片描述
至此基本的Promise封裝結構就搭建好了，執行代碼會看到沒有報錯，所以可以繼續進行封裝
代碼如下

//----------------------index.html代碼----------------------------------------------
<script src="./Promise.js"></script>
<body>
  <script>
    let p=new Promise((resolve,reject)=>{
      resolve('OK');
    })

    p.then(value=>{
      console.log(value);
    },reason=>{
      console.log(reason);
    })
  </script>
</body>
//---------------------Promise.js代碼---------------------------------
//宣告建構式
function Promise(executor){

}
// 添加then方法
Promise.prototype.then=function(onResolved,onRejectd){

}

2. 封裝推進-----resolve與reject代碼內部結構搭建

1：邏輯是：實體化Promise時需要一個執行器函式傳入，于是右側宣告時出現了一個形參executor
2：同時這個形參執行器函式是同步呼叫執行的，于是exector（）加括號表示立即函式執行，
3：左側注意這個執行器函式是有兩個引數resolve和reject的，下面還執行了這個reslove函式，同時有引數傳進去
4：于是很自然的，如果不定義這兩個函式，那么這個函式體內是無法傳入這兩個引數的
5：所以在執行函式的上方，需要定義這兩個函式resolve，以及reject，同時二者都有（data）作為引數

邏輯結構：
在這里插入圖片描述
代碼如下：

// 宣告建構式
function Promise(executor){
  // resolve函式
  function resolve(data){

  }
  // reject函式
  function reject(data){

  }
  // 同步呼叫 -- 執行器函式
  executor(resolve,reject);
}

3. 封裝推進-----resolve與reject代碼內部功能代碼實作

先熟知Promise執行器函式中 resolve/reject 的功能作用：
	1：修改物件的狀態(屬性promiseState)
	2：設定物件的結果值（屬性promiseResult）
	（例如：resolve('OK')是將狀態改成fulfilled或者resolved，將結果值改成OK），實質都是對兩個內置屬性的修改

于是要進行屬性的添加，狀態屬性PromiseState的默認值就是常說的pendding狀態   物件值默認是null
  // 添加屬性,以便下面修改
  this.PromiseState="pendding";
  this.PromiseResult=null;
  // resolve函式
  function resolve(data){
    // 1.修改物件的狀態
    this.PromiseState="fulfilled";//和resolved一樣的含義，都表示成功
    // 2.設定物件的結果值
    this.PromiseResult=data;
  }
  // reject函式
  function reject(data){
    // 1.修改物件的狀態
    this.PromiseState="rejected";
    // 2.設定物件的結果值
    this.PromiseResult=data;
  }

小插曲：按照以上修改去控制改變實體promise中的執行器函式值并不會產生改變，兩個屬性值不會變化，代碼更改如下：

    let p=new Promise((resolve,reject)=>{
      // resolve('OK');
      reject('error');
    })
    console.log(p)

理想的屬性結果值應該為：

    // 1.修改物件的狀態
    this.PromiseState="rejected";
    // 2.設定物件的結果值
    this.PromiseResult=data="error";

在這里插入圖片描述
原因所在： this的具體指向問題

	在resolve函式中，this的指向是window而不是上面實體化的Promise物件，導致更改不會起作用
	解決辦法:重新保存實力物件中的this值，或者使用箭頭函式

最終代碼：

// 宣告建構式
function Promise(executor){
  // 添加屬性,以便下面修改
  this.PromiseState="pendding";
  this.PromiseResult=null;
  // // 保存實體物件的 this 的值
  // const self=this;
  // resolve函式
  function resolve(data){
    // 1.修改物件的狀態
    self.PromiseState="fulfilled";//和resolved一樣的含義，都表示成功
    // 2.設定物件的結果值
    self.PromiseResult=data;
  }
  // reject函式
  function reject(data){
    // 1.修改物件的狀態
    self.PromiseState="rejected";
    // 2.設定物件的結果值
    self.PromiseResult=data;

  }
  // 同步呼叫 -- 執行器函式
  executor(resolve,reject);
}

實體中仍然使用reject，最終實體結果：

    let p=new Promise((resolve,reject)=>{
      // resolve('OK');
      reject('error');
    })
    console.log(p)

實體結果：
在這里插入圖片描述
同理：

至此：關于自定與封裝Promise中，已經實作了基本結構以及resolve、reject內部代碼結構和功能的實作！其他功能見后續封裝分享！

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/260557.html

標籤：其他

上一篇：郭老師的K8s冰蠶毒掌

下一篇：CNN卷積神經網路之VGGNet