前言

理解並使用promise。

一、原理及作用

1. promise是一種非同步解決方案。

• 由於ajax非同步方式請求資料時，我們不能知道資料具體回來的事件，所以過去只能將一個callback函式傳遞給ajax封裝的方法，當ajax非同步請求完成時，執行callback函式。

• promise物件接受resolve和reject兩個引數，當一個非同步動作發生時，promise物件會通過resolve完成對動作成功進行解析，reject會捕獲這個動作的異常。一個promise物件，通過new Promise().then()執行下一步驟操作。
• axios is a promise based HTTP client for the browser and node.js。也就是說，使用axios發出請求，難免涉及promise

Promise建構函式的引數是一個函式，函式裡面的程式碼是非同步的，即Promise裡面的操作，和Promise()外面的操作時非同步"同時"進行的。Promise中的函式的第一個引數是回撥函式，resolve用來觸發then裡面的程式碼，第二個引數是回撥函式，reject用來觸發catch中的程式碼，throw new Error();也可以觸發catch，

• resolve和reject是兩個回撥函式，呼叫resolve會觸發then，reject會觸發catch

<script>
new Promise((resolve, reject) =>{
    setTimeout(() 
 
=>{
        //成功的時候呼叫resolve
        resolve('成功data')
        //失敗的時候呼叫reject
        reject('error message')
    }, 1000)
}).then((data) =>{
    //處理成功後的邏輯
    console.log(data);//這個data 是接收的resolve引數--
}).catch((err) =>{
    console.log(err);
})
</script>　

• 在一個promise鏈中，只要任何一個promise被reject，promise鏈就被破壞了，reject之後的promise都不會再執行，而是直接呼叫.catch方法。

p1().then(p2).then(p3)
  .then(function(data) {
    console.log('data: ' + data);
  })
  .catch(function(error) {
    console.log('error: ' + error);
  });
  
function p1() {
  return new Promise(function(resolve, reject) {
    console.log('p1 resolved');
    resolve(123);
  });
}
  
function p2() {
  return new Promise(function(resolve, reject) {
    console.log('p2 rejected');
    reject(456);
  });
}
  
function p3() {
  return new Promise(function(resolve, reject) {
    console.log('p3 resolved');
    resolve(789);
  });
}// 執行結果p1 resolvedp2 rejectederror: 456

2. async await

Promise建構函式的引數是一個函式，函式裡面的程式碼是非同步的，即Promise裡面的操作，和Promise()外面的操作時非同步"同時"進行的。此外，只要在函式前面加上async關鍵字，也可以指明函式是非同步的。

async關鍵字實際是通過Promise實現，如果async函式中有返回一個值 ,當呼叫該函式時，內部會呼叫Promise.solve()方法把它轉化成一個promise物件作為返回，但如果timeout函式內部丟擲錯誤，那麼就會呼叫Promise.reject()返回一個promise物件。若某函式呼叫一個非同步函式（比如內部含有primise），該函式應用async修飾。

await表示“等待”，修飾返回promise物件的表示式。注意await關鍵字只能放到async函式裡面。

function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}
//寫一個async函式，從而可以使用await關鍵字， await後面放置的就是返回promise物件的一個表示式，所以它後面可以寫上doubleAfter2seconds函式的呼叫

async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}

await 等待後面的promise物件執行完畢，然後拿到promise resolve的值並進行返回。顯然await可以修飾axios請求，等待得到結果再往下進行，如：

async getUserList(){
            const {data: res} = await this.$http.get('users', {
                params: this.queryInfo
            })
            //console.log(res)
            if (res.meta.status !== 200) return this.$message.error('獲取使用者列表失敗! ')
            this.userlist = res.data.users
            this.total = res.data.total
        }

參看連結：https://www.cnblogs.com/kongrui/p/13299410.html

二、使用