Promise 之初探

陳舊的知識應該更新一下了，先嚐試一下 Promise ，主要參考 http://www.javashuo.com/article/p-ynqqhjop-by.html

定義一個函數

直接上乾貨，定義一個函數：

const myPost = (url, data) => {
    // 接收url 和data，向後端提交
    console.log('url:', url)
    console.log('data:', data)
    const p = new Promise((resolve,reject)=>{ // resolve,reject是形式參數，能夠是任意寫法，如(res, rej),默認第一個參數實現的是resolve功能；第二個參數實現的是reject功能。
      console.log("myPost:")
      data.push('處理完畢') 
      resolve(data) // 返回參數
      // resolve(）不一樣於return, resolve()執行完成後後面的代碼還會執行。
      reject('失敗了')
    })
    return p
  }

這個函數，僞裝要向後端提交申請，而後返回後端給的數據。

const p = new Promise() 定義一個實例，簡單理解，resolve 是成功的回調函數，reject 是失敗的回調函數。

注意：這裏只是簡單理解，實際上並不徹底是這樣。

單次調用

myPost('url1', [1,2,3]).then((data) => {
          console.log("單次調用的結果:")
          console.log(data)
        },(msg) => {
          console.log('myPost的else'+msg)
        })

傳入url和須要提交的數據，而後在then裏面等待結果。then裏面第一個方法是成功的回調，第二個方法是失敗的回調。

咱們看一下運行結果：

依次調用

myPost('urla', [1,2,3]).then((data) => {
          console.log("第一個調用完成：")
          console.log(data)
          return myPost('urlb', data) // 發起第二次請求
        }).then((data) => {
          console.log("第二個調用完成：")
          console.log(data)
          return myPost('urlc', data) // 發起第三次請求
        }).then((data) => {
          console.log("第三個調用完成：")
          console.log(data)
          return myPost('urld', data) // 發起第四次請求
        }).then((data) => {
          console.log("第四個調用完成：")
          console.log(data)
        })

有的時候須要屢次向後端提交申請，並且須要前一次申請獲得的數據，才能發起下一次申請。
那麼能夠用這種依次申請的方式。

先發起第一個申請，而後獲得數據，而後依據數據發起第二次申請，同理能夠依次發起n次申請。

由於是獲得結果才能發起下次申請，因此提交順序和返回順序皆能夠控制。

看一下運行結果：

這裏有個小問題，第一次訪問的結果裏面 console.log(data) 出來的是四個數組元素，這個是期待的，可是打開看裏面卻有7個。這就奇怪了。

批量一塊兒調用

Promise.all([
          myPost('urla', [1,2,3]),
          myPost('urlb', [1,2,3]),
          myPost('urlc', [1,2,3])
        ]).then((data) => {
            console.log("一塊兒調用，一塊兒返回：")
            console.log(data)
            console.log(data[1])
        },(msg) => {
          console.log(msg)
        })

有的時候，向後端發出的申請，能夠一塊兒提交，並不須要上次返回的結果，那麼能夠這麼寫，這樣是否是比then.then.then的好看多了。

那麼返回的數據是啥樣子的呢？是數組，順序和上面提交的順序是一致的。

咱們來看看結果：

這裏也有個意外，原本覺得一塊兒調用的結果，會出如今依次訪問的第四次訪問結果的後面。
可是實際狀況卻發生了「亂入」。
一塊兒訪問的結果，插入了依次訪問的「內部」。

這裏並無使用settimeout來模擬後端訪問，原本覺得都是順序執行，可是實際並非，估計是promise內部的一些原理致使的，先不去研究了，暫時先這樣。第一步先會用，知道返回的順序的特色。

這裏的返回結果，並無出現數組元素數量莫名增長的狀況。問題出在哪裏，在繼續研究。

疑問：

• 你可能會奇怪，這個根本就沒有任何訪問後端的代碼嘛，忽悠人是否是？
  其實並非，如今流行的axios就是依據promise來實現的，也就是說axios自己就是一個promise實例，至關於函數裏面的p。
  咱們把promise的使用方式理解了以後，使用axios實現向後端的訪問，就輕鬆多了。
  另外這裏是熟悉promise的用法，並非熟悉axios的用法。

• 另外一個問題是，爲啥要本身寫個函數，直接用axios不香嗎？ 這個和我的習慣有關係。我老是習慣本身再多加一層，這樣函數名稱、參數、返回方式就均可以歸我我的來控制了， 這樣便於應對版本升級，更換第三方類庫，增長本身想要的功能。 好比我想加入前端存儲的功能，提交的數據在前端 localStorage 裏面保存一份的話，就能夠直接在本身定義的函數裏面實現，而不用在頁面代碼裏面增長調用的函數。