Vue前端交互模式與Promise怎么使用

這篇文章主要介紹“Vue前端交互模式與Promise怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue前端交互模式與Promise怎么使用”文章能幫助大家解決問題。

Promise 概述

Promise 是異步編程的一種解決方案，從語法上講，Promise 是一個對象，從它可以獲取異步操作的消息。

優點：

• 可以避免多層異步調用嵌套問題（回調地獄）

• Promise 對象提供了簡潔的 API，使得控制異步操作更加容易

Promise基本用法

• 實例化 Promise 對象，構造函數中傳遞函數，該函數中用于處理異步任務

• resolve 和 reject 兩個參數用于處理成功和失敗兩種情況，并通過 p.then 獲取處理結果

var p = new Promise(function(resolve,reject){
    //實現異步任務...
    //成功時調用
    resolve();
    //失敗時調用
    reject();
});
p.then(function(ret){
    //從resolve得到正常結果
},function(ret){
    //從reject得到錯誤信息
});

基于 Promise 處理 Ajax 請求

1. 處理原生 Ajax

function queryData(url){
    return new Promise(function(resolve,reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState!=4) return;
            if(xhr.status == 200){
                resolve(xhr.responseText);
            }else{
                reject('出錯了');
            }
        }
        xhr.open('get',url);
        xhr.send(null);
    });
}
//調用
queryData('http://localhost:3000/data').then(
    function (data) {
        console.log(data);
    },
    function (data) {
        console.log(data);
    }
)

1. 發送多次 ajax 請求(解決回調地獄)

queryData('http://localhost:3000/data')
    .then(function (data) {
        console.log(data);
        //異常情況可以不處理
        return queryData('http://localhost:3000/data1');
    })
    .then(function (data1) {
        console.log(data1);
        return queryData('http://localhost:3000/data2');
    })
    .then(function (data2) {
        console.log(data2);
    });

then參數中的函數返回值

1. 返回 Promise 實例對象返回的該實例對象會調用下一個 then

2. 返回普通值返回的普通值會直接傳遞給下一個 then，通過 then 參數中函數的參數接收該值

Promise常用的API

1.實例方法

* p.then()得到異步任務的正確結果
* p.catch()獲取異常信息
* p.finally()成功與否都會執行（暫時還不是正式標準）

foo()
    .then(function (data) {
        console.log(data);
    })
    .catch(function (data) {
        console.log(data);
    })
    .finally(function () {
        console.log('finish');
    })

也可以寫為:

foo()
    .then(function (data) {
        console.log(data);
    },
    function (data) {
        console.log(data);
    })
    .finally(function () {
        console.log('finish');
    })

2.對象方法

• Promise.all() 并發處理多個異步任務，所有任務都執行完成才能得到結果

//p1,p2,p3為Promise實例對象任務
Promise.all([p1,p2,p3]).then((result)=>{
    console.log(result);
})

• Promise.race()并發處理多個異步任務，只要有一個任務完成就能得到結果

Promise.race([p1,p2,p3]).then((result)=>{
    console.log(result);
})

關于“Vue前端交互模式與Promise怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。