對Promise的深情，只好淺談

Fenglinlin發表於2018-05-19
Promise

對Promise的深情，只好淺談

對Promise的深情，只好淺談

謝時間拈了眉頭的霜花，謝滄桑 餵飽思念的馬，謝綿長情話 投射了天涯，帶我去探索Promise，讓偶在紅塵中，啊，不，在Promise中醉一下。

回撥的前世今生，讓你再見不必害怕

我相信當每個人遇到Promise的那一刻，在你身上產生了一種由內而發的情感，叫作承諾，叫作心動。那麼，故事就由此開始了。

故事的發生產生的一個行為，包括了三個階段

階段1：什麼是Promise？

Promise是基於es6的，在之前的版本中是沒有的，像koa中的generator,還有後來的async、await、axios 、redux-saga，要想深入理解運用，Promise是關鍵，那麼Promise到底怎麼理解呢？

Promise本意是承諾，在程式中的理解呢，就是它是一種非同步流程的控制手段，我們都知道js中常見非同步有：定時器，callback，ajax請求，那怎麼理解非同步呢？古人云：“君子一言，駟馬難追！”，這句話，就是形容，一個人答應另一個人，在將來一定會實現的諾言，就是Promise要做的事情。簡而言之，非同步就是，過一段時間確認必須要做的事情。

階段2：Promise的三個狀態
  • Pending: Promise物件例項建立時候的初始狀態
  • Fulfilled可以理解為成功的狀態
  • Rejected可以理解為失敗的狀態
  1. then方法就是用來指定Promise物件的狀態改變時確定執行的操作，resolve時執行第一個函式（onFulfilled）,reject時執行第二個函式（onRejected）.
  2. Promise只有一個引數，叫excutor執行器，預設new時就會呼叫

下面我們來看一段程式碼:


   Let p = new Promise((resolve, reject) => { 
     // 預設promise中的executor是同步執行的
      resolve(‘成功的回撥’); 
     //reject（’失敗的回撥’）;
   });
   p.then((value) => { // vlaue成功的原因
       console.log(value); // ‘成功的回撥’
    },(err)=>{ //err失敗的原因
       console.log(err);  //  ’失敗的回撥’
   })
複製程式碼
階段3：Promise解決回撥地獄

首先，先解釋一下什麼是回撥地獄，我們經常會遇到這樣的情況：一個介面的引數會需要使用另一個介面獲取，之前通常採取的方法，就是ajax裡面巢狀ajax，這樣做也能解決此問題，但是給開發者還來了痛苦的回憶，而且使用者體驗極差，現在，我們終於迎來了Promise的時代，它完美的解決了回撥地獄。

下面我們來看一下，它的實現方式：


    let fs = require('fs');
    function read(file){
        return new Promise(function(resolve,reject){
            fs.readFile(file,'utf8',function(err,data){
                if (err) {
                    return reject(err);
                }
                resolve(data);
            })
        })
    }   
    read('./1.txt').then(function(data){
        return read(data);
    }).then(function(data){
        console.log(data);
    }).catch(function(err){
        console.log(err)
    })
複製程式碼

當第一個then中返回一個promise,會將返回的promise的結果，傳遞到下個then中。這就是比較著名的鏈式呼叫了。

好了，到這裡，故事接近尾生啦，希望通過上述的三點，讓大家能對promise有一個簡單的瞭解，想知道Promise的更多內容嗎?請繼續關注我給大家帶來的後續文章。

相關文章