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

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

Promise 對(duì)象用于表示一個(gè)異步操作的最終狀態(tài)（完成或失?。?，以及其返回的值。

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

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

pending （進(jìn)行中）

fulfilled (已成功)

rejected (已失敗)

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

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

只有異步操作的結(jié)果可以決定當(dāng)前狀態(tài)的變化，其他任何操作都不改變Promise對(duì)象的狀態(tài)，即承諾這個(gè)詞的由來(lá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方法接受兩個(gè)參數(shù)分別對(duì)應(yīng)兩個(gè)狀態(tài)的處理，其中對(duì)應(yīng)rejected的參數(shù)可選，兩個(gè)參數(shù)都接受上面promise對(duì)象傳出的參數(shù)作為參數(shù)
promise.then(function(value) {
  // success 成功處理
}, function(error) {
  // failure 錯(cuò)誤處理
});

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

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("上面是個(gè)異步過(guò)程，所以我先出來(lái)，后面才是水果");

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

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("上面是個(gè)異步過(guò)程，所以我先出來(lái)，后面才是水果");

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

再來(lái)看看下面這個(gè)拋出錯(cuò)誤的相關(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);// 拋出錯(cuò)誤之后 執(zhí)行catch操作 接受的參數(shù)是拋出的錯(cuò)誤，其實(shí).catch只是Promise.then(reject)的別名而已
        })
        .then((value) => {
            console.log(value);// undefined 拋出錯(cuò)誤后沒(méi)有 return 所以這里是個(gè)undefined
            console.log("我任性，錯(cuò)了之后仍要執(zhí)行");// catch之后仍然可以繼續(xù)執(zhí)行then操作 
        });

注釋上寫的很清楚咯~~

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

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