摘要：又有好些天沒有動(dòng)筆了，這幾天一直在斷斷續(xù)續(xù)的學(xué)習(xí)和，今天終于能夠把著兩個(gè)玩意結(jié)合起來(lái)了解決異步問(wèn)題了。今天我先把相關(guān)的用法和對(duì)異步的處理分享給大家。老樣子，還是先模擬一個(gè)。

又有好些天沒有動(dòng)筆了，這幾天一直在斷斷續(xù)續(xù)的學(xué)習(xí)Promise和generator，今天終于能夠把著兩個(gè)玩意結(jié)合起來(lái)了解決異步問(wèn)題了。今天我先把promise相關(guān)的用法和對(duì)異步的處理分享給大家。
老樣子，還是先模擬一個(gè)Promise。

//咳咳這樣就實(shí)現(xiàn)了嘛
let MyPromise = Promise;

開個(gè)玩笑，其實(shí)這兩天我也一直在看Promise的實(shí)現(xiàn)，但是還是沒有怎么理解。所以Promise的代碼實(shí)現(xiàn)我暫時(shí)先放一放，等我完全理解再來(lái)新開一篇分享。這里先給大家推薦幾篇我覺得比較好的Promise實(shí)現(xiàn)的博客，想要學(xué)習(xí)的小伙伴可以先到那邊一睹為快，當(dāng)然等我更新了之后大家還是要來(lái)給我文章點(diǎn)贊的哈。
徹底理解Promise對(duì)象——用es5語(yǔ)法實(shí)現(xiàn)一個(gè)自己的Promise(上篇)這一篇文章用的es5的語(yǔ)法，對(duì)es6不是很熟悉的同學(xué)可以用這篇文章頂一下
Promise實(shí)現(xiàn)原理（附源碼）這一篇呢是用到了class的，所以需要大家對(duì)es6有所了解，也是一篇好文章

接下來(lái)我介紹一下Promise最常用的幾個(gè)部分：

首先先介紹最簡(jiǎn)單的只有一個(gè)Promise對(duì)象的用法

//Promise()接收一個(gè)函數(shù)，并且在創(chuàng)建這個(gè)Promise對(duì)象的同時(shí)，接收的這個(gè)函數(shù)就會(huì)被立刻執(zhí)行
var promise = new Promise(function (resolve, reject) {
  //resolve用來(lái)接收成功的返回,reject用來(lái)接收失敗的返回
  setTimeout(function () {
    //這里我們生成一個(gè)隨機(jī)數(shù)，并在接下來(lái)根據(jù)這個(gè)隨機(jī)數(shù)的大小來(lái)判斷這個(gè)異步是否成功
    let num = Math.random();
    if (num  > 0.8) {
      //接收失敗的原因
      console.log("reject")
      reject(num + "大于0.8，這次異步操作失敗了")
    } else {
      //接收成功的數(shù)據(jù)
      console.log("resolve")
      resolve(num + "小于0.8，這次異步操作成功了")
    }
  }, 100)
});
console.log("一個(gè)Promise對(duì)象生成了");
//Promise對(duì)象的.then()方法接收兩個(gè)回調(diào)，第一個(gè)為成功回調(diào)，第二個(gè)為失敗回調(diào)
//這兩個(gè)回調(diào)會(huì)在上面的resolve或者reject函數(shù)生效后被調(diào)用
promise.then(function (data) {
  //這個(gè)函數(shù)會(huì)在上面的resolve函數(shù)被調(diào)用后生效,這里的data就是上面resolve()中接收的值
  console.log(data)
}, function (err) {
  ///這個(gè)函數(shù)會(huì)在上面的reject函數(shù)被調(diào)用后生效,這里的err就是上面reject()中接收的值
  console.error(err)
});
console.log("promise的.then方法被調(diào)用了")

大家可以按F12喚起控制臺(tái)，然后把這段代碼運(yùn)行幾次?？纯磿?huì)有什么結(jié)果；
多運(yùn)行幾次以后，大家應(yīng)該可以看到這兩類結(jié)果：


其中的undefind是console.log("promise的.then方法被調(diào)用了")這行代碼的返回，大家可以不用關(guān)注。在這里可以看到不論是成功的結(jié)果還是失敗的結(jié)果都是在定時(shí)器執(zhí)行后再打印出來(lái)的。這種寫法可以幫助我們實(shí)現(xiàn)簡(jiǎn)單的異步編程。

接下介紹多個(gè)Promise對(duì)象同時(shí)使用的用法， 先介紹最常見的.then()鏈?zhǔn)秸{(diào)用的方法

 //用來(lái)快速生成一個(gè)Promise對(duì)象，接收一個(gè)日志列表，不論成功還是失敗都會(huì)往日志列表中添加一條日志
 function promise(log) {
   return new Promise(function (resolve, reject) {
     setTimeout(function () {
       log = log || [];
       //和上次的例子一樣，利用隨機(jī)數(shù)來(lái)隨機(jī)失敗和成功
       let num = Math.random();
       if (num > 0.5) {
         log.push(num + "大于0.5，這次異步操作失敗了");
         reject(log)
       } else {
         log.push(num + "小于0.5，這次異步操作成功了");
         resolve(log)
       }
     }, 100)
   })
 }

.then()中返回了Promise對(duì)象的情況

var promise1 = promise();
//promise1.then()方法會(huì)返回一個(gè)Promise對(duì)象
//如果我們?cè)?then()生效的那個(gè) !!!回調(diào)方法!!! 中有返回一個(gè)Promise對(duì)象的話，該對(duì)象會(huì)被  !!!.then()方法!!!  返回

//先看返回了Promise對(duì)象的方式
promise1.then(function (data) {
  console.log(data);
  return promise(data)
}, function (err) {
  console.error(err);
  return promise(err)
}).then(function (data) {
  console.log(data)
}, function (err) {
  console.error(err)
});

這段代碼運(yùn)行后一共會(huì)有四種結(jié)果：
兩次都成功

兩次都失敗

第一次失敗，第二次成功

第一次成功，第二次失敗

通過(guò)這種方法我們可以用比較清晰的方式來(lái)書寫我們的異步代碼。特別是多個(gè)異步操作嵌套的時(shí)候，可以鏈?zhǔn)秸{(diào)用.then()來(lái)實(shí)現(xiàn)，這樣的代碼看起來(lái)邏輯更清晰；
剛剛看完了返回了Promise對(duì)象的場(chǎng)景，再來(lái)看看沒有返回Promise的場(chǎng)景

//如果我們沒有返回Promise對(duì)象，.then()就會(huì)將我們返回的東西包裝成一個(gè)Promise對(duì)象（沒有返回就相當(dāng)于返回了undefined）
//可以等同于我們寫了 return new Promise((resolve,reject)=>{resolve(/*原先的返回值*/)})
promise1.then(function (data) {
  console.log(data);
  return data;
}, function (err) {
  console.error(err);
  return err;
}).then(function (data) {
  console.log(data)
}, function (err) {
  //這里是永遠(yuǎn)不會(huì)被觸發(fā)的，原因是上一個(gè).then() 返回的是new Promise((resolve,reject)=>{resolve(/*原先的返回值*/)})
  //返回的Promise對(duì)象的reject方法永遠(yuǎn)都不會(huì)被觸發(fā)，所以這個(gè)里也就永遠(yuǎn)都不會(huì)觸發(fā)了
  console.error(err)
});

講解都寫在注釋里面了，接下里我就貼運(yùn)行圖吧，這段代碼會(huì)運(yùn)行出以下兩類結(jié)果：

需要所有的請(qǐng)求都返回后才可以執(zhí)行某個(gè)動(dòng)作

//改造promise,讓其可以接收一個(gè)定時(shí)器等待時(shí)間參數(shù)
function promise(log, time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      log = log || [];
      //和上次的例子一樣，利用隨機(jī)數(shù)來(lái)隨機(jī)失敗和成功
      let num = Math.random();
      if (num > 0.5) {
        log.push("等待時(shí)長(zhǎng)" + time + "," + num + "大于0.5，這次異步操作失敗了");
        console.error(log);
        reject(log)
      } else {
        log.push("等待時(shí)長(zhǎng)" + time + "," + num + "小于0.5，這次異步操作成功了");
        console.log(log);
        resolve(log)
      }
    }, time)
  })
}
//Promise.all()可以接收一個(gè)Promise對(duì)象的數(shù)組，返回一個(gè)Promise對(duì)象
//該P(yáng)romise對(duì)象會(huì)在數(shù)組中所有Promise成功返回后執(zhí)行成功回調(diào)，在任意一個(gè)Promise失敗后立刻執(zhí)行失敗回調(diào)
var promise1 = promise(null, 10), promise2 = promise(null, 100),
  promise3 = Promise.all([promise1, promise2]);
promise3.then((data) => {
  //這里的data為promise1,和promise2的返回值的數(shù)組
  console.log("promise3", data)
}, (err, err2) => {
  //報(bào)錯(cuò)信息
  console.error("promise3", err)
});

這段代碼一共有四種可能的結(jié)果
如果兩次都成功的話

如果兩次都成的話，promise3會(huì)執(zhí)行成功回調(diào)，并且回調(diào)中的data就是promise1和promise2返回值的數(shù)組（數(shù)組順序和.all()中的順序一致）



任意一個(gè)promise失敗的話，promise3會(huì)立刻執(zhí)行失敗回調(diào)，并且回調(diào)中的err就是失敗的那個(gè)promise在reject中返回的值

文章寫到這里，我認(rèn)為Promise常用的一些用法都已經(jīng)講完了，更詳細(xì)的Promise的教程請(qǐng)參考 MDN中對(duì)promise的講解