Vue前端交互模式、Promise用法（回調(diào)地獄）

Promise 概述

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

優(yōu)點(diǎn)：

• 可以避免多層異步調(diào)用嵌套問(wèn)題（回調(diào)地獄）
• Promise 對(duì)象提供了簡(jiǎn)潔的 API，使得控制異步操作更加容易

Promise基本用法

• 實(shí)例化 Promise 對(duì)象，構(gòu)造函數(shù)中傳遞函數(shù)，該函數(shù)中用于處理異步任務(wù)
• resolve 和 reject 兩個(gè)參數(shù)用于處理成功和失敗兩種情況，并通過(guò) p.then 獲取處理結(jié)果

var p = new Promise(function(resolve,reject){
    //實(shí)現(xiàn)異步任務(wù)...
    //成功時(shí)調(diào)用
    resolve();
    //失敗時(shí)調(diào)用
    reject();
});
p.then(function(ret){
    //從resolve得到正常結(jié)果
},function(ret){
    //從reject得到錯(cuò)誤信息
});  

基于 Promise 處理 Ajax 請(qǐng)求

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('出錯(cuò)了');
            }
        }
        xhr.open('get',url);
        xhr.send(null);
    });
}
//調(diào)用
queryData('http://localhost:3000/data').then(
    function (data) {
        console.log(data);
    },
    function (data) {
        console.log(data);
    }
)

1. 發(fā)送多次 ajax 請(qǐng)求(解決回調(diào)地獄)

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參數(shù)中的函數(shù)返回值

1. 返回 Promise 實(shí)例對(duì)象返回的該實(shí)例對(duì)象會(huì)調(diào)用下一個(gè) then
2. 返回普通值返回的普通值會(huì)直接傳遞給下一個(gè) then，通過(guò) then 參數(shù)中函數(shù)的參數(shù)接收該值

Promise常用的API

1.實(shí)例方法

* p.then()得到異步任務(wù)的正確結(jié)果
* p.catch()獲取異常信息
* p.finally()成功與否都會(huì)執(zhí)行（暫時(shí)還不是正式標(biāo)準(zhǔn)）

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

也可以寫(xiě)為:

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

2.對(duì)象方法

• Promise.all() 并發(fā)處理多個(gè)異步任務(wù)，所有任務(wù)都執(zhí)行完成才能得到結(jié)果

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

• Promise.race()并發(fā)處理多個(gè)異步任務(wù)，只要有一個(gè)任務(wù)完成就能得到結(jié)果

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