----歡迎查看我的博客----

什么是promise對象

??promise的誕生，是為了解決回調(diào)地獄，相信這個詞大家聽的比較多了。簡單說就是一個異步的方法完成后再觸發(fā)方法，再觸發(fā)下一個異步方法，再觸發(fā)方法，再觸發(fā)一個異步方法......周而復始，不停的callback，寫法非常繁瑣，因此es6中出現(xiàn)了promise對象。
??它早已不是一個新名詞。ES6中已經(jīng)原生對它加以支持,但是低版本的瀏覽器我們可以使用es6-promise這個polyfill庫來加以兼容。它有三種狀態(tài)，分別是pending-進行中、resolved-已完成、rejected-已失敗。

image

ajax

??我們以ajax為例子，我們來看下傳統(tǒng)的ajax和promise包裹住的ajax，有什么區(qū)別，分析出來您大概就明白了

普通ajax

getData(method, url, successFun, failFun){
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open(method, url);
  xmlHttp.send();
  xmlHttp.onload = function () {
    if (this.status == 200 ) {
      successFun(this.response);
    } else {
      failFun(this.statusText);
    }
  };
  xmlHttp.onerror = function () {
    failFun(this.statusText);
  };
}
getData('get','www.xxx.com',()=>{...},()=>{...})

promise包裹的

getData(method, url){
    var promise = new Promise(function(resolve, reject){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open(method, url);
    xmlHttp.send();
    xmlHttp.onload = function () {
      if (this.status == 200 ) {
        resolve(this.response);
      } else {
        reject(this.statusText);
      }
    };
    xmlHttp.onerror = function () {
      reject(this.statusText);
    };
  })
  return promise;
}

getData('get','www.xxx.com').then(...).catch(
    (err) => { console.log(err) }
)

??看完上面兩個例子，應該都知道promise是什么了吧。說白了只不過是換了種寫法，其實本質(zhì)還是一樣的，所以大家沒必要對新東西恐懼。其實就這樣了。

Promise使用方法

??promise有這么幾種方法，用來調(diào)用promise對象。

resolve()方法

??上面樣例我們通過 resolve 方法把 Promise 的狀態(tài)置為完成態(tài)，ajax200狀態(tài)，這時 then 方法就能捕捉到變化，并執(zhí)行“成功”情況的回調(diào)。

reject()方法

??而 reject 方法就是把 Promise 的狀態(tài)置為已失敗，這時 then 方法執(zhí)行“失敗”情況的回調(diào)。

then()方法

??簡單來講，then 方法就是把原來的回調(diào)寫法分離出來，在異步操作執(zhí)行完后，用鏈式調(diào)用的方式執(zhí)行回調(diào)函數(shù)。而 Promise 的優(yōu)勢就在于這個鏈式調(diào)用。我們可以在 then 方法中繼續(xù)寫 Promise 對象并返回，然后繼續(xù)調(diào)用 then 來進行回調(diào)操作.這個就不多說了，上面代碼有例子

catch()方法

??就是拋異常，promise通過reject方法失敗后的方法通過catch的方法去拋異常拋出來。通過then的方法將他catch出來。其實非常簡單，沒什么可以講的。

Promise.all()

??promise對象組成的數(shù)組作為參數(shù)，并返回一個新的promise對象。

function timeout(time) {
    return new Promise(function (resolve) {
        setTimeout(function () {
            resolve(time);
        }, time);
    });
}
console.time('promise')
Promise.all([
    timeout(10),
    timeout(60),
    timeout(100)
]).then(function (values) {
    console.log(values); [10, 60, 100]
    console.timeEnd('promise');   // 101ms
});

??由此我們可以看出，傳入的多個對象幾乎是同時執(zhí)行的，因為總的時間略大于用時最長的一個對象resolve的時間。我理解的 是根據(jù)你的計算機配置來計算最多執(zhí)行幾個promise，這個就很有利用點了，比如多個promise對象，for循環(huán)同時執(zhí)行，我們可以考慮將所有的promise對象組成一個promise數(shù)組，然后.all去完成大量的請求。非常有用。

race()方法

??race 按字面解釋，就是賽跑的意思。race 的用法與 all 一樣，只不過 all 是等所有異步操作都執(zhí)行完畢后才執(zhí)行 then 回調(diào)。而 race 的話只要有一個異步操作執(zhí)行完畢，就立刻執(zhí)行 then 回調(diào)。我們來把all換成race方法。

function timeout(time) {
    return new Promise(function (resolve) {
        setTimeout(function () {
            resolve(time);
        }, time);
    });
}
console.time('promise')
Promise.race([
    timeout(10),
    timeout(60),
    timeout(100)
]).then(function (values) {
    console.log(values); //10
    console.timeEnd('promise');   // 11.75ms
});

??與Promise.all()不同，它是在數(shù)組中有一個對象（最早改變狀態(tài)）resolve或reject時，就改變自身的狀態(tài)，并執(zhí)行響應的回調(diào)。

如何取消 promise

??在這篇文章中有提到這里就不多說了，請看這里 ajax 和 fetch 和 axios 的區(qū)別 。

結(jié)語

??好了今天的promise就講到這里，如果更往深層次研究，坑肯定 還是有的，例如promise不能取消，后面我們有時間在詳細說說這個玩意，好了不說了，困死我了今天，昨晚看人民的民義，我去硬是看完了大結(jié)局，精彩是精彩的，就是官二代有點多。。。哈哈哈，不說了拜拜