Promise、async、await 異步解決方案

參考： http://www.javashuo.com/article/p-ohkdrkdv-eh.html  或  https://www.jianshu.com/p/fe0159f8beb4（推薦這個，比較清晰）

---

 Promise ：https://www.jianshu.com/p/fe0159f8beb4

一、Promise 對象 ：Promise 對象是一個代理對象。（new Promise 建立的Promise 對象，是經過裏面的代碼邏輯決定狀態的改變的。下面二、3點建立的Promise 狀態改變的定好了的。）

二、Promise.resolve()  ：將現有對象轉爲 Promise 對象的快捷方式。（注意，這個不是Promise實例的方法，不要混爲一談。即 new Promise 和 Promise.resolve() 都是建立Promise 對象的方法）

　  Promise.resolve() 的參數 分 4 種狀況：http://www.javashuo.com/article/p-ocdwlgvr-nc.html

　a、不帶有任何參數，直接返回一個resolved狀態的 Promise 對象。

    const p = Promise.resolve()

    p.then(res => {
      console.log(res) // undefined
    })

　b、傳一個普通的對象，將普通對象 轉爲 Promise 對象

let p1 =Promise.resolve({name:'xixi',age:'xxxx'});

p1.then(result => {
    console.log(result);  // {name: "xixi", age: "xxxx"}
});

    c、傳一個 Promise 對象實例， Promise.resolve將不作任何修改、原封不動地返回這個實例。

    let p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('success')
      }, 500)
    })

    let pp = Promise.resolve(p)

    pp.then(result => {
      console.log(result) // success
    })

    console.log(pp === p) // true

　  d、傳一個 thenable對象（thenable對象指的是具備then方法的對象），Promise.resolve方法會將這個對象轉爲 Promise 對象，而後就當即執行thenable對象的then方法。（通常不會使用這種狀況的參數，這裏不詳細說明）

    let thenable = {
      then: function (resolve, reject) {
        resolve(42) // 這裏 then函數返回的不是一個 Promise對象就不會執行下面那個then裏面的函數
      }
    }
    let p1 = Promise.resolve(thenable)
    p1.then(function (value) {
      console.log(value) // 42
    })

三、Promise.reject()  ：快速的獲取一個拒絕狀態的 Promise 對象。（這個方法 和 Promise.resolve() 方法是同樣功能。Promise 對象會有兩個狀態變化，Promise.reject()建立的對象就是執行catch中的函數）

　  注意：Promise.reject() 後面沒有 catch 函數就會報錯的。Promise.resolve() 後面沒有 then函數是 不會報錯的。

四、Promise.resolve().then()  的 執行順序比 setTimeout(fn, 0) 先。同步程序確定比 異步Promise 對象先執行。

setTimeout(function () {
　　console.log('three');
}, 0);

Promise.resolve().then(function () {
　　console.log('two');
});

console.log('one');
// one
// two
// three

五、Promise 對象的回調函數（then或catch）中沒有return ，執行後的 至關於 返回  沒有參數的 Promise.resolve() 對象。

    var resolve = Promise.resolve('resolve')
      .then(res => {
        console.log('resolveSuc',res)
      })
      .catch(err => {
        console.log('resolveErr',err)
      })
    var reject = Promise.reject('reject')
      .then(res => {
        console.log('rejectSuc',res)
      })
      .catch(err => {
        console.log('rejectErr',err)
      })

    setTimeout(function () {
      console.log(resolve) // Promise {<resolved>: undefined}
      console.log(reject) // Promise {<resolved>: undefined}
    }, 0)

六、Promise.reject() 對象 有多個 then 函數，只有一個catch 函數（任意位置），鏈式函數會先執行 catch 裏面的函數，而且從這個 catch 開始繼續執行下面的鏈式寫法的函數。（Promise.resolve()一樣的道理，從第一個then開始連續問下執行）

    Promise.reject('resolve')
    .then(res => {  console.log('sucess1', res) })
    .then(res => {  console.log('sucess2', res) })
    .catch(() => {  console.log('fail_1')
    })
    .then(res => {
      console.log('sucess5', res)
      return Promise.reject('resolve')
    })
    .then(res => {  console.log('sucess6', res) })
    .catch(() => {  console.log('fail_2')  })
    
    // fail_1
    // sucess5 undefined
    // fail_2

 

---

 

 Async-Await （這是 es8 的內容）  http://www.javashuo.com/article/p-ogxfiwfh-z.html

一、async用於申明一個function是異步的。而 await 能夠認爲是async wait的簡寫，等待一個異步方法執行完成。（Async-Await 是 寄生於 Promise的）

二、async 函數 執行後返回的是一個 promise 對象，而不是 普通函數具體的  返回值。（promise 對象是須要經過 then或catch 添加回調函數的）。

    async function timeout () {
      return 'hello world'
    }
    console.log(timeout()) // Promise {<resolved>: "hello world"}
    console.log('雖然在後面，可是我先執行')

三、await 只能在 async 定義的函數裏面 使用，不能單獨使用。實際上，await是強制把異步變成了同步。（await 後面能夠聽任何表達式，通常都是promise對象，由於放同步的表達式就沒有 等待的意義了。）

async getFaceResult () {
                try { // 注意，這裏使用try...catch 捕獲 異常
                    let location = await this.getLocation(this.phoneNum);
                    if (location.data.success) {
                        let province = location.data.obj.province;
                        let city = location.data.obj.city;
                        let result = await this.getFaceList(province, city);
                        if (result.data.success) {
                            this.faceList = result.data.obj;
                        }
                    }
                } catch(err) {
                    console.log(err);
                }
            }

 

 

我的體會 ：一、Async-Await 使得 異步代碼內的異步，能夠同步執行。（簡單理解，就是多個異步程序嵌套，只要經過 Async 告訴程序，最外圍的一個函數是異步就能夠了，裏面的異步所有變成同步的執行。）

　　　　　　這種 程序控制   在 某個請求 須要另外一個請求返回的參數，這種多層請求嵌套的 時候 就很是有優點。

　　　　　 二、promise 解決了回調函數不能 返回 數據的問題。由於promise是異步返回的數據不知道什麼纔有，因此基本沒什麼用。可是 await 的出現，使得 promise返回的數據能夠進行使用了。（即異步回調函數的返回值能夠控制何時使用了）

 　　　　　三、Async-Await 至關於聲明一個異步的程序空間，在這個空間中讓異步的程序，同步執行。這樣就不用再異步程序中嵌套回調函數了，所有都是同步的寫法，而且加強是代碼可讀性。  http://www.javashuo.com/article/p-ndomjibl-ec.html （這裏的執行順序，並非想固然的那樣，有時間在研究下）