返回結(jié)果是promise的處理

調(diào)用element-ui中提供的方法是，經(jīng)常返回結(jié)果類型對象是promise，

如果某個函數(shù)調(diào)用的結(jié)果打印后返回的是promise，就馬上用saync和await進行優(yōu)化，async放到方法名稱的前面，await放到方法里面

對promise的一些理解

1.promise是一種異步解決方案

• 由于ajax異步方式請求數(shù)據(jù)時，我們不能知道數(shù)據(jù)具體回來的事件，所以過去只能將一個callback函數(shù)傳遞給ajax封裝的方法，當ajax異步請求完成時，執(zhí)行callback函數(shù)。
• promise對象接受resolve和reject兩個參數(shù)，當一個異步動作發(fā)生時，promise對象會通過resolve完成對動作成功進行解析，reject會捕獲這個動作的異常。一個promise對象，通過new Promise().then()執(zhí)行下一步驟操作。
• axios is a promise based HTTP client for the browser and node.js。也就是說，使用axios發(fā)出請求，難免涉及promise

Promise構(gòu)造函數(shù)的參數(shù)是一個函數(shù)，函數(shù)里面的代碼是異步的，即Promise里面的操作，和Promise()外面的操作時異步"同時"進行的。Promise中的函數(shù)的第一個參數(shù)是回調(diào)函數(shù)，resolve用來觸發(fā)then里面的代碼，第二個參數(shù)是回調(diào)函數(shù)，reject用來觸發(fā)catch中的代碼，throw new Error();也可以觸發(fā)catch，

• resolve和reject是兩個回調(diào)函數(shù)，調(diào)用resolve會觸發(fā)then，reject會觸發(fā)catch

<script>
new Promise((resolve, reject) =>{
    setTimeout(() =>{
        //成功的時候調(diào)用resolve
        resolve('成功data')
        //失敗的時候調(diào)用reject
        reject('error message')
    }, 1000)
}).then((data) =>{
    //處理成功后的邏輯
    console.log(data);//這個data 是接收的resolve參數(shù)--
}).catch((err) =>{
    console.log(err);
})
</script>　　

• 在一個promise鏈中，只要任何一個promise被reject，promise鏈就被破壞了，reject之后的promise都不會再執(zhí)行，而是直接調(diào)用.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);
  });
}// 執(zhí)行結(jié)果p1 resolvedp2 rejectederror: 456

2.async await

Promise構(gòu)造函數(shù)的參數(shù)是一個函數(shù)，函數(shù)里面的代碼是異步的，即Promise里面的操作，和Promise()外面的操作時異步"同時"進行的。此外，只要在函數(shù)前面加上async 關(guān)鍵字，也可以指明函數(shù)是異步的。

async關(guān)鍵字實際是通過Promise實現(xiàn)，如果async 函數(shù)中有返回一個值 ,當調(diào)用該函數(shù)時，內(nèi)部會調(diào)用Promise.solve() 方法把它轉(zhuǎn)化成一個promise 對象作為返回，但如果timeout 函數(shù)內(nèi)部拋出錯誤，那么就會調(diào)用Promise.reject() 返回一個promise 對象。若某函數(shù)調(diào)用一個異步函數(shù)（比如內(nèi)部含有primise），該函數(shù)應(yīng)用async修飾。

await表示“等待”，修飾返回promise 對象的表達式。注意await 關(guān)鍵字只能放到async 函數(shù)里面。

function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}//寫一個async?函數(shù)，從而可以使用await?關(guān)鍵字， await?后面放置的就是返回promise對象的一個表達式，所以它后面可以寫上?doubleAfter2seconds?函數(shù)的調(diào)用
async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}

await 等待后面的promise對象執(zhí)行完畢，然后拿到promise resolve 的值并進行返回。顯然await可以修飾axios請求，等待得到結(jié)果再往下進行，如： 

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
        }

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

最新評論