溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue中的Promise如何使用

發(fā)布時間:2022-03-04 13:46:06 來源:億速云 閱讀:316 作者:iii 欄目:開發(fā)技術

本篇內容主要講解“vue中的Promise如何使用”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“vue中的Promise如何使用”吧!

簡介:

promise是什么,它可以說是異步編程的一種解決方法,就拿傳統(tǒng)的ajax發(fā)請求來說,單個還好,如果是一個請求回來的數據還要被其他請求調用,不斷地嵌套,可想而知,代碼看起來是很亂的,promise主要是為了解決這種情景而出現的。

一、使用

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

  • 由于ajax異步方式請求數據時,我們不能知道數據具體回來的事件,所以過去只能將一個callback函數傳遞給ajax封裝的方法,當ajax異步請求完成時,執(zhí)行callback函數。

  • promise對象接受resolve和reject兩個參數,當一個異步動作發(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構造函數的參數是一個函數,函數里面的代碼是異步的,即Promise里面的操作,和Promise()外面的操作時異步"同時"進行的。Promise中的函數的第一個參數是回調函數,resolve用來觸發(fā)then里面的代碼,第二個參數是回調函數,reject用來觸發(fā)catch中的代碼,throw new Error();也可以觸發(fā)catch,

resolve和reject是兩個回調函數,調用resolve會觸發(fā)then,reject會觸發(fā)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都不會再執(zhí)行,而是直接調用.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í)行結果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對象執(zhí)行完畢,然后拿到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如何使用”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續(xù)學習!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI