vue中返回結果是promise的處理方式是什么

本文小編為大家詳細介紹“vue中返回結果是promise的處理方式是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue中返回結果是promise的處理方式是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

返回結果是promise的處理

調用element-ui中提供的方法是，經常返回結果類型對象是promise，

如果某個函數調用的結果打印后返回的是promise，就馬上用saync和await進行優化，async放到方法名稱的前面，await放到方法里面

對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        }

讀到這里，這篇“vue中返回結果是promise的處理方式是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。