摘要：周五就想寫這篇文章，但是無奈花花世界的誘惑太多就一直拖到了今天，自責(zé)遍進(jìn)入正題對象用于表示一個異步操作的最終狀態(tài)完成或失敗，以及其返回的值。

周五就想寫這篇文章，但是無奈花花世界的誘惑太多……就一直拖到了今天，自責(zé)1e4遍;
進(jìn)入正題Promise:

Promise 對象用于表示一個異步操作的最終狀態(tài)（完成或失?。约捌浞祷氐闹?。

上為MDNPromise的定義；
ES6規(guī)定Promise是一個構(gòu)造函數(shù)，用來生成Promise實(shí)例（就是跟new一個女朋友一樣）；
Promise意為‘承諾’，承諾是發(fā)生在未來且必須達(dá)成的事，對應(yīng)Promise對象是一個保存著未來才會結(jié)束的異步操作的“容器”；

Promise對象代表的異步操作有三個狀態(tài)：

pending （進(jìn)行中）

fulfilled (已成功)

rejected (已失敗)

Promise對象有一下兩個特點(diǎn)：

上述的三個狀態(tài)一經(jīng)改變則不會更改且任何時候都可以得到這個結(jié)果

只有異步操作的結(jié)果可以決定當(dāng)前狀態(tài)的變化，其他任何操作都不改變Promise對象的狀態(tài)，即承諾這個詞的由來，也表現(xiàn)了程序猿的浪漫~~

const promise = new Promise(function(resolve, reject) {
  // ... some code 立即執(zhí)行

  if (/* 異步操作成功 */){
    resolve(value);// 將狀態(tài)改為fulfilled 并將參數(shù)傳遞給then中的回調(diào)函數(shù)
  } else {
    reject(error);// 將狀態(tài)改為rejected 并將參數(shù)傳遞給then/catch中的回調(diào)函數(shù)
  }
});
// then方法接受兩個參數(shù)分別對應(yīng)兩個狀態(tài)的處理，其中對應(yīng)rejected的參數(shù)可選，兩個參數(shù)都接受上面promise對象傳出的參數(shù)作為參數(shù)
promise.then(function(value) {
  // success 成功處理
}, function(error) {
  // failure 錯誤處理
});

了解了基本用法我們來了解一下Promise到底有啥用啊，我的理解就是以同步的方式（鏈?zhǔn)秸{(diào)用）去處理異步操作（回調(diào)），在這個Promise對象出現(xiàn)之前我們是怎么處理異步操作的呢？
舉個栗子~：

console.log("start");
setTimeout(function (name) {
          var fruitList = name + ",";

          setTimeout(function (name) {
            fruitList += name + ",";

            setTimeout(function (name) {
              fruitList += name + ",";

              setTimeout(function (name) {
                fruitList += name + ",";

                setTimeout(function (name) {
                  fruitList += name;

                  console.log(fruitList);

                }, 1, "西瓜");

              }, 1, "香蕉");

            }, 1, "橘子");

          }, 1, "蘋果");}, 1, "葡萄");
          
          console.log("上面是個異步過程，所以我先出來，后面才是水果");

我這里只是簡單的寫了幾層簡單的定時器而已，如果要很多很多層并且稍微復(fù)雜一點(diǎn)的回調(diào)函數(shù)就很難以維護(hù)了且代碼閱讀很難受。所以Promise的出現(xiàn)就是為了鏈?zhǔn)降恼{(diào)用來實(shí)現(xiàn)這種異步操作同樣以本例改為Promise的方式來一遍~：

console.log("start");
var promise1 = new Promise((resolve,reject)=>{
              setTimeout(resolve("葡萄"),1);
          });
promise1.then(value=>new Promise((resolve,reject)=>setTimeout(resolve(value+",蘋果"),1)))
        .then(value=>new Promise((resolve,reject)=>setTimeout(resolve(value+",橘子"),1)))
        .then(value=>new Promise((resolve,reject)=>setTimeout(resolve(value+",香蕉"),1)))
        .then(value=>new Promise((resolve,reject)=>setTimeout(resolve(value+",西瓜"),1)))
        .then(value=>{console.log(value)});

console.log("上面是個異步過程，所以我先出來，后面才是水果");

其實(shí)本例中的reject參數(shù)可以省略，因?yàn)槲夷J(rèn)他肯定會成功的了，額還有就是寫function比較麻煩這里直接用了箭頭函數(shù)~~恩……在科普一個小坑給你們，如果在vue中使用promise用箭頭函數(shù)要比寫function舒服很多，function中this指向的是window而不是vue實(shí)例~

再來看看下面這個拋出錯誤的相關(guān)栗子：

console.log("start");
        new Promise((resolve, reject) => {
            var data = [1,2,3,4,5,6,7];
            return resolve(data);
        })
        .then((result) => {
            var newResult = result.slice(1);   
            return newResult;
        })
        .then((result)=>{
            console.log(result);
            throw new Error("someting error");
        })
        .catch((value)=>{
            console.log(value);// 拋出錯誤之后 執(zhí)行catch操作 接受的參數(shù)是拋出的錯誤，其實(shí).catch只是Promise.then(reject)的別名而已
        })
        .then((value) => {
            console.log(value);// undefined 拋出錯誤后沒有 return 所以這里是個undefined
            console.log("我任性，錯了之后仍要執(zhí)行");// catch之后仍然可以繼續(xù)執(zhí)行then操作 
        });

注釋上寫的很清楚咯~~

接下來在來個實(shí)際點(diǎn)的用法異步加載圖片（原諒我其實(shí)是從阮一峰老師那里偷來的栗子吃）：

function loadImageAsync(url){
        return new Promise((resolve,reject)=>{
        var image = new Image();
        image.onload = function(){
            resolve(image);
        }
        image.onerror = function(){
            reject(new Error("不能加載圖片,url是"+ url));
        }
        image.src = url;
    });
}
loadImageAsync("QQ圖片20171114220539.png").then(value =>{
    console.log(value);
    document.body.append(value);
});

由于最近確實(shí)是忙得頭昏腦脹，就先簡單的分享一波基礎(chǔ)用法，剩下的關(guān)于promise的兩種模式Promise.all()和Promise.race()等我改天再加或者另發(fā)一篇吧
同樣你也可以去這里學(xué)習(xí)了解一下：http://es6.ruanyifeng.com/#do...