關於Promise知識點都在這裡

kpengfang發表於2018-05-19

Promise是什麼？(承諾)

Promise本意是承諾，在程式中的意思就是承諾我過一段時間後會給你一個結果。什麼時候會用到過一段時間？答案是非同步操作，非同步是指可能比較長時間才有結果的才做，例如網路請求、讀取本地檔案等。

Promise的三種狀態

pending是物件建立後的初始狀態，當物件fulfill（成功）時變為fulfilled，當物件reject（失敗）時變為rejected。且只能從pengding變為fulfilled或rejected ，而不能逆向或從fulfilled變為rejected 、從rejected變為fulfilled。如圖所示：

Promise是一種非同步流程的控制手段;

回撥地獄，程式碼難以維護，第一個的輸入是第二個的輸入。比如常用的ajax呼叫，程式碼如下：

$.ajax(
    success(){
        $.ajax(
            success(){
                
            }
        )
    }
)
複製程式碼

promise鏈式呼叫

可以支援多個併發的請求，獲取併發請求中的資料;

a().b()//比如這個a執行完了，執行b
ajax()//1
ajax()//2
複製程式碼

可以解決非同步的問題，本身不能說promise是非同步的(then方法是非同步的)

promise（承諾）關鍵詞 resolve成功 reject失敗 pending 等待

如果一旦promise成功了就不能失敗，相反也是一樣的；只有狀態是等待的狀態時才可以轉化狀態；每一個promise的例項上都有一個then方法,then方法中有兩個引數，一個引數叫成功的函式，一個是失敗的函式；promise中發生錯誤就會執行失敗態。

let p = new Promise((resolve,reject)=>{//預設promise中的excutor是同步執行的。
    resolve('承諾');//resolev走成功
    reject('沒承諾');//reject 走失敗
});
p.then((value)=>{//value成功的原因
    console.log('success');
},(err)=>{//err失敗的原因
    console.log('faile');
})
複製程式碼

用Promise鏈式呼叫讀取檔案解決金字塔demo

金字塔demo:

let fs = require('fs');
fs.readFile('1.txt','utf8',function(err,data){
    if(err)return console.log(err);
    
    fs.readFile(data,'utf8',function(err,data){
        if(err)return console.log(err);
        console.log(data);
        
        fs.readFile(data,'utf8',function(err,data){
        if(err)return console.log(err);
        console.log(data);
    })
    })
})
複製程式碼

promise 鏈式呼叫

如果返回的是promise那麼會取這個promise的結果，如過成功會走外層的promise的下一個then的成功，將資料傳遞到成功裡；
promise 實現鏈式呼叫返回的並不是this而是一個新的promise。

function read(url) {
  return new Promise((resolve,reject)=>{
    fs.readFile(url, 'utf8', function (err, data) {
      if(err) reject(err);
      resolve(data);
    })
  })
}
// 鏈式呼叫--前提新建兩個文字文件，分別是1.txt和2.txt; 1.txt裡面寫的2.txt,2.txt裡面寫的222
read('1.txt').then((data)=>{
  return read(data);//如果返回了一個新的promise
  //return 100;//如果返回的是一個普通值就會走到寫一個then中的成功回撥
  //throw new Error();//假如成功裡面丟擲個異常，會走下一個then的失敗
}).then(data=>{
  console.log(data);//222 輸出的2.txt裡面的內容
},err=>{
  console.log(err);
}).then(data=>{
  console.log(data,'000');//undefined '000'
});//失敗之後還可以再then,依然會走到成功這裡的then
複製程式碼

Promise.all和Promise.race以及Promise.resole Promise.reject

Promise.all 例子：

Promise.all方法呼叫會返回一個新的promise

let fs = require('fs');
function read(url) {
  return new Promise((resolve, reject) => {
    fs.readFile(url, 'utf8', function (err, data) {
      if (err) reject(err);
      resolve(data);
    })
  })
}
//第一種
// Promise.all([read('1.txt'),read('2.txt')]).then((data)=>{
//   console.log(data);
// })
//第二種
Promise.all([read('1.txt'),read('2.txt')]).then((r1,r2)=>{
  console.log(r1,r2);
},err=>{
  console.log(err);
});
複製程式碼

Promise.race 例子：

Promise.race賽跑順序執行不一定,處理多個請求只取最快的

let fs = require('fs');
function read(url) {
  return new Promise((resolve, reject) => {
    fs.readFile(url, 'utf8', function (err, data) {
      if (err) reject(err);
      resolve(data);
    })
  })
}
//如果讀取的檔案不存在，就直接走失敗了
Promise.race([read('1.txt'),read('2.txt')]).then((data)=>{
  console.log(data);
},err=>{
  console.log(err);
});
複製程式碼

Promise成功失敗的例子：

Promise.resolve()返回一個成功的promise
Promise.reject()返回一個失敗的promise

Promise.resolve('success').then(data=>{
    console.log('data')//success
})
Promise.reject('fail').then(null,data=>{//希望第一個引數不傳，此處的null可以忽略掉
    console.log(data);//fail
})
複製程式碼

Promise原始碼分解

根據Promises/A（Promise的官方標準）我們家實現一個160行左右程式碼的Promise。

1、構造器

class Promise {
  constructor(executor) {
    this.status = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    let resolve = (data) => {
      if (this.status === 'pending') {
        this.value = data;
        this.status = 'resolved';
        this.onResolvedCallbacks.forEach(fn => fn());
      }
    }
    let reject = (reason) => {
      if (this.status === 'pending') {
        this.reason = reason;
        this.status = 'rejected';
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    }
    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }
  then(onFulFilled, onRejected) {
    onFulFilled = typeof onFulFilled === 'function' ? onFulFilled : y => y;
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
    let promise2;
    if (this.status === 'resolved') {
      promise2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          try {
            let x = onFulFilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
    }
    if (this.status === 'rejected') {
      promise2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          try {
            let x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
    }
    if (this.status === 'pending') {
      promise2 = new Promise((resolve, reject) => {
        this.onResolvedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onFulFilled(this.value);
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e);
            }
          }, 0)
        });
        // 存放失敗的回撥
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      })
    }
    return promise2; // 呼叫then後返回一個新的promise
  }
  // catch接收的引數 只用錯誤
  catch(onRejected) {
    // catch就是then的沒有成功的簡寫
    return this.then(null, onRejected);
  }
}
複製程式碼

2、官方給出了一個叫做resolvePromise的函式

function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('迴圈引用'));
  }
  if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
    let called;
    try { // 防止取then是出現異常 Object.defineProperty
      let then = x.then; // 取x的then方法 {then:{}}
      if (typeof then === 'function') { // 如果then是函式我就認為它是promise
        // call 第一個引數是this ，後面的是成功的回撥和失敗的回撥
        then.call(x, y => { // 如果y是promise就繼續遞迴解析promise
          if (called) return;
          called = true;
          resolvePromise(promise2, y, resolve, reject);
        }, r => { // 只要失敗了就失敗了
          if (called) return;
          called = true;
          reject(r);
        });
      } else { // then是一個普通物件，就直接成功即可1
        resolve(x);
      }
    } catch (e) {
      if (called) return;
      called = true;
      reject(e);
    }
  } else { // x = 123
    resolve(x); // x就是一個普通值
  }
}
複製程式碼

3、接下來是Promise的常用方法

Promise.resolve
Promise.reject
Promise.race
Promise.all

//生成一個成功的promise
Promise.resolve = function (val) {
  return new Promise((resolve, reject) => resolve(val))
}
//生成一個失敗的promise
Promise.reject = function (val) {
  return new Promise((resolve, reject) => reject(val));
}
//Promise.race就是賽跑的意思，哪個結果獲得的快，就返回那個結果，不管結果本身是成功狀態還是失敗狀態。
Promise.race = function (promises) {
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(resolve, reject);
    }
  });
}
//Promise 物件上的靜態方法，該方法的作用是將多個 Promise 物件例項包裝，生成並返回一個新的 Promise 例項。
Promise.all = function (promises) {
  return new Promise((resolve,reject)=>{
    let arr = [];
    let i = 0; // i的目的是為了保證獲取全部成功，來設定的索引
    function processData(index,data) {
      arr[index] = data;
      i++;
      if (i === promises.length){
        resolve(arr);
      }
    }
    for(let i = 0;i<promises.length;i++){
      promises[i].then(data=>{
        processData(i,data);
      }, reject);
    }
  })
}
Promise.deferred = Promise.defer = function () {
  let dfd = {};
  dfd.promise = new Promise((resolve, reject) => {
    dfd.resolve = resolve;
    dfd.reject = reject;
  })
  return dfd;
}
複製程式碼

最後一步一定要記得

module.exports = Promise; //匯出模組
複製程式碼

4、完成了一個Promise原始碼，接下來可以安裝一個node模組進行測試程式碼；安裝模組：npm install promises-aplus-tests -g 執行命令：promises-aplus-tests 檔名

npm install promises-aplus-tests -g //安裝測試模組
promises-aplus-tests Promise.js
複製程式碼

經過node包命令測試，完全符合Promise規範。

Fragment 相關知識點都在這裡了
2019-03-25
Fragment
關於Java IO與NIO知識都在這裡
2019-03-04
Java
關於MySQL的知識點與面試常見問題都在這裡
2018-06-16
MySql面試
關於機器學習的知識點，全在這篇文章裡了
2019-08-17
機器學習
你想了解的Promise，都在這裡！！
2018-11-19
Promise
你想知道的關於 Refs 的知識都在這了
2019-10-29
Promise知識點
2020-03-19
Promise
所有和Java中代理有關的知識點都在這了。
2019-03-01
Java
Promise重要知識點
2020-03-21
Promise
JavaScript中回撥函式知識點，都在這了！
2021-12-22
JavaScript函式
promise知識點小結
2019-03-04
Promise
快來，你想要的koa知識幾乎都在這裡了！
2018-05-02
關於《密碼法》，你想知道的都在這裡
2020-07-20
密碼
關於模切行業ERP的都在這裡
2021-12-16
行業
面試總結:Promise有關面試的知識點。
2018-10-03
面試Promise
上海HarmonyOS開發者日最值得關注的點都在這裡
2021-04-17
Android 社會化分享，你應知道的知識都在這裡
2017-12-13
Android
關於JVM，你必須知道的這些知識點
2020-12-20
JVM
Promise的10大知識點！
2020-02-24
Promise
關於移動遊戲SDK，你想了解的都在這裡
2021-04-02
遊戲
React相關知識點：關於Redux
2019-05-05
ReactRedux
關於Java面試，你應該準備這些知識點
2018-01-24
Java面試
Promise學習筆記（知識點 + 手寫Promise）
2021-09-09
Promise筆記
關於碼頭管理系統，需要了解的都在這裡
2022-07-14
關於知識圖譜，各路大神最近都在讀哪些論文？
2018-05-23
關於animation和transition一點知識
2020-02-13
關於range的一個知識點
2018-05-02
關於專案管理的知識點
2007-06-20
專案管理
關於工商詳細資訊 API，你想了解的都在這裡了
2023-04-07
API
怎麼掌握安卓中高階開發面試知識點？快取重點都在這！
2020-01-10
安卓面試快取
ECMA script6 promise知識點整理
2018-01-23
Promise
一些關於react的keep-alive功能相關知識在這裡(上)
2022-04-10
ReactKeep-Alive
一些關於react的keep-alive功能相關知識在這裡(下)
2022-04-11
ReactKeep-Alive
【實用知識】關於“投標有效期”，這幾點要注意
2020-01-06
關於這個知識點，我被讀者罵到回家種田
2022-06-16
關於Java兩點需要更新的知識
2020-05-27
Java
關於 CSS 的零碎知識點
2019-02-20
CSS
前端關於單點登入的知識
2018-08-24
前端