async/await，promise的優缺點

async/await

1. await后面接一個會return new promise的函數並執行它
2. await只能放在async函數里

舉例：

function 搖色子(){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        setTimeout(()=>{
            resolve(sino)
        },3000)
    })
}
async function test(){
    let n =await 搖色子()
    console.log(n)
}
test()

上面這段代碼async中使await 搖色子()先執行，等到三秒后執行完再把得到的結果賦值給左邊的n，也就是說test函數需要三秒鍾才執行完成，所以test函數是異步的，因此前面必須寫async

把await和成功后的操作放到try里，失敗的放在catch

async function test(){
    try{
        //把await及獲取它的值的操作放在try里
        let n =await 搖色子('大')
        console.log('贏了' + n)
    }catch(error){
      //失敗的操作放在catch里
        console.log('輸了' + error)
    }
}
test()

Promise

new Promise(
  function (resolve, reject) {
    // 一段耗時的異步操作
    resolve('成功') // 數據處理完成
    // reject('失敗') // 數據處理出錯
  }
).then(
  (res) => {console.log(res)},  // 成功
  (err) => {console.log(err)} // 失敗
)

resolve作用是:

將Promise對象的狀態從“未完成”變為“成功”（即從 pending 變為 resolved），在異步操作成功時調用，並將異步操作的結果，作為參數傳遞出去；

reject作用是:

將Promise對象的狀態從“未完成”變為“失敗”（即從 pending 變為 rejected），在異步操作失敗時調用，並將異步操作報出的錯誤，作為參數傳遞出去。

promise有三個狀態：

1. pending[待定]初始狀態
2. fulfilled[實現]操作成功
3. rejected[被否決]操作失敗

當promise狀態發生改變，就會觸發then()里的響應函數處理后續步驟；

promise狀態一經改變，不會再變。

Promise對象的狀態改變，只有兩種可能：
從pending變為fulfilled
從pending變為rejected。
這兩種情況只要發生，狀態就凝固了，不會再變了。

舉例（分倆次進行）：

new Promise(resolve => {
    setTimeout(() => {
      resolve('hello')
    }, 2000)
  }).then(val => {
    console.log(val) //  參數val = 'hello'
    return new Promise(resolve => {
      setTimeout(() => {
        resolve('world')
      }, 2000)
    })
  }).then(val => {
    console.log(val) // 參數val = 'world'
  })

Promise完成后.then()

let pro = new Promise(resolve => {
   setTimeout(() => {
     resolve('hello world')
   }, 2000)
 })
 setTimeout(() => {
   pro.then(value => {
   console.log(value) // hello world
 })
 }, 2000)

捕獲錯誤：

Promise對象內部其實自帶了try catch，當同步代碼發生運行時錯誤時，會自動將錯誤對象作為值reject，這樣就會觸發catch注冊的回調，如下：

let p = new Promise((resolve, reject) => {
  throw "error";
});

p.catch(err => {
  console.log("catch " + err); // catch error
});

 

async/await的優點

（1）async/awsit他做到了真正的串行的同步寫法，代碼閱讀相對容易
（2）對於條件語句和其他流程語句比較友好，可以直接寫到判斷條件里面
（3）async/await處理復雜流程時，在代碼清晰度方面具有優勢

async/await的特點

（4）無法處理Promise返回reject對象，要借助try...catch
（5）async/await中await只能串行，做不到並行，{await不在同一個async函數里就可以並行}
（6）全局捕獲錯誤必須用window.onerror,而這種會捕獲稀奇古怪的錯誤造成系統浪費，不像Promise可以專用window.addEventListener('unhandledrejection',function)

async/await的缺點

（7）try...catch...內部的變量無法傳遞給下一個try...catch...
（8）無法簡單實現Promise的各種原生方法，比如->race()

倆者使用場合

（1）需要使用到Promise各種便捷的方法的時候一定使用Promise
（2）並行的請求最好用Promise
（3）不需要並行的場合，但是要傳遞參數時，最好用Promise
（4）其他ajax場合，看喜好選擇try...catch...還是.catch()，

參考：

https://www.jianshu.com/p/3a37272de675