Promise的簡(jiǎn)單實(shí)現(xiàn)

Hwg 發(fā)布于2019-08-21 16:58 / 720人閱讀

摘要：本篇文章通過(guò)構(gòu)建一個(gè)簡(jiǎn)單的對(duì)象來(lái)了解如何做到異步獲得數(shù)據(jù)。的簡(jiǎn)單實(shí)現(xiàn)首先，我們要知道實(shí)際上是一個(gè)對(duì)象，當(dāng)我們運(yùn)行下面的代碼可以發(fā)現(xiàn)返回。

本篇文章通過(guò)構(gòu)建一個(gè)簡(jiǎn)單的Promise對(duì)象來(lái)了解如何做到異步獲得數(shù)據(jù)。

使用方法

const fetch = function(url) {
  return new Promise((resolve, reject) => {
    request((error, apiResponse) => {
      if (error) {
         //返回為error的時(shí)候，調(diào)用reject函數(shù)
        reject(error)
      }
      // 有數(shù)據(jù)返回的時(shí)候，調(diào)用resolve
      resolve(apiResponse)
    })
  })
}

這個(gè)fetch()的方法返回了一個(gè)Promise對(duì)象，接著我們就可以用then來(lái)對(duì)獲得的數(shù)據(jù)進(jìn)行處理，catch來(lái)捕獲可能的錯(cuò)誤。

Promise的簡(jiǎn)單實(shí)現(xiàn)

首先，我們要知道Promise實(shí)際上是一個(gè)對(duì)象，當(dāng)我們運(yùn)行下面的代碼可以發(fā)現(xiàn)返回true。

console.log(typeof new Promise((resolve, reject) => {}) === "object") // true

接著要構(gòu)建一個(gè)Promise類，來(lái)生成Promise Object。

思路：

在constructor 里面?zhèn)魅雃xecutionFunction, 然后將onResolve,onReject映射到里面，then主要做一件事情，就是將onResolve的函數(shù)收集起來(lái)，在this.onResolve里面一起調(diào)用，每次返回的值都覆蓋前一次的。

說(shuō)的什么玩意兒，眼見為實(shí)下面來(lái)看一下代碼：

class PromiseSimple{
    constructor(executionFunction) {
        this.promiseChain = [];
        this.onResolve = this.onResolve.bind(this)
        this.onReject = this.onReject.bind(this)
        this.handleError = () => {}
        // 外界傳入的函數(shù)我們將其定義為executionFunction，將里面
        // 的onResolve onReject 映射到this.onResolve, this.onReject
        executionFunction(this.onResolve, this.onReject)
    }
    then(onResolve) {
        // 收集狀態(tài)成功的時(shí)候的回調(diào)函數(shù)
        this.promiseChain.push(onResolve)
        return this
    } 
    catch(onReject) {
        this.handleError = onReject
        return this
    }
    onResolve(value) {
    var storedValue = value;
    try {
        // 在resolve里面執(zhí)行
        this.promiseChain.forEach((executePromise) => {
            storedValue = executePromise(storedValue)
        })
    } catch(error){
        this.promiseChain = [];
        this.onReject(error)
    }
    }
    onReject(error) {
        this.handleError(error)
    }
}

梳理一下，其實(shí)只要記住其中兩點(diǎn)：

1、這個(gè)對(duì)象有四個(gè)方法then catch onResolve onReject，它們的作用分別是

then

用來(lái)收集有數(shù)據(jù)的時(shí)候的回調(diào)函數(shù)，放在this.promiseChain里，注意這里要返回this

對(duì)象才能實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用

catch

用來(lái)處理出現(xiàn)的error，注意這里要返回this對(duì)象實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用

onResolve

依次執(zhí)行then里面收集的回調(diào)函數(shù)，并且將回調(diào)函數(shù)的返回值在作為參數(shù)傳給下一個(gè)回調(diào)函數(shù)

onReject

用來(lái)處理出現(xiàn)的error

2、then catch 必須要返回this,才能實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用

這樣我們一個(gè)簡(jiǎn)單的Promise 對(duì)象就做好了

下面可以用這個(gè)來(lái)玩一玩

class PromiseSimple {
  constructor(executionFunction) {
    this.promiseChain = [];
    this.handleError = () => {};

    this.onResolve = this.onResolve.bind(this);
    this.onReject = this.onReject.bind(this);

    executionFunction(this.onResolve, this.onReject);
  }

  then(onResolve) {
    this.promiseChain.push(onResolve);

    return this;
  }

  catch(handleError) {
    this.handleError = handleError;

    return this;
  }

  onResolve(value) {
    let storedValue = value;

    try {
      this.promiseChain.forEach((nextFunction) => {
         storedValue = nextFunction(storedValue);
      });
    } catch (error) {
      this.promiseChain = [];

      this.onReject(error);
    }
  }

  onReject(error) {
    this.handleError(error);
  }
}

fakeApiBackend = () => {
  const user = {
    username: "treyhuffine",
    favoriteNumber: 42,
    profile: "https://gitconnected.com/treyhuffine"
  };

  // Introduce a randomizer to simulate the
  // the probability of encountering an error
  if (Math.random() > .05) {
    return user;
  } else {
    const error = {
      statusCode: 404,
      message: "Could not find user",
      error: "Not Found",
    };
    
    return error;
  }
};

// Assume this is your AJAX library. Almost all newer
// ones return a Promise Object
const makeApiCall = () => {
  return new PromiseSimple((resolve, reject) => {
    // Use a timeout to simulate the network delay waiting for the response.
    // This is THE reason you use a promise. It waits for the API to respond
    // and after received, it executes code in the `then()` blocks in order.
    // If it executed is immediately, there would be no data.
    setTimeout(() => {
      const apiResponse = fakeApiBackend();

      if (apiResponse instanceof  Error) {
        reject(apiResponse);
      } else {
        resolve(apiResponse);
      }
    }, 5000);
  });
};

makeApiCall()
  .then((user) => {
    console.log("In the first .then()");
  
    return user;
  })
  .then((user) => {
    console.log(`User ${user.username}"s favorite number is ${user.favoriteNumber}`);
  
    return user;
  })
  .then((user) => {
    console.log("The previous .then() told you the favoriteNumber")
  
    return user.profile;
  })
  .then((profile) => {
    console.log(`The profile URL is ${profile}`);
  })
  .then(() => {
    console.log("This is the last then()");
  })
  .catch((error) => {
    console.log(error.message);
  });

參考文檔：
https://medium.com/gitconnect...