Vue前端互動模式、Promise用法（回呼地獄）-有解無憂

前端互動模式

介面呼叫方式

原生ajax
基于jQuery的ajax
fetch
axios

URL地址格式

傳統形式的URL
格式：schema://host:port/path?query#frahment
1. schema：協議，例如http、https、ftp等（必需）
2. host：域名或者IP地址（必需）
3. port：埠，http默認埠80，可以省略
4. path：路徑，例如/abc/a/b/c（虛擬路徑，區分不同資源）
5. query：查詢引數，例如uname=tkrj&age=19
6. fragment：錨點（哈希Hash），用于定位頁面的某個位置
Restful形式的URL
與HTTP請求方式相關
1. GET 查詢
2. POST 添加
3. PUT 修改
4. DELETE 洗掉

Promise用法

異步呼叫

異步效果分析
1. 定時任務
2. Ajax
3. 事件函式
多次異步呼叫的以來分析
- 多次異步呼叫的結果順序不確定
- 異步呼叫結果如果存在依賴需要嵌套

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請求

處理原生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);
    }
)

發送多次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引數中的函式回傳值

回傳Promise實體物件
- 回傳的該實體物件會呼叫下一個then
回傳普通值
- 回傳的普通值會直接傳遞給下一個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);
})

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/260603.html

標籤：其他

上一篇：微信小程式在模板語法中使用indexOf無效問題解決

下一篇：角色管理模塊