promise初識

codercao 發布于2019-08-21 17:19 / 1361人閱讀

摘要：一涉及技術二簡介官方文檔三種狀態進行中已完成，又稱已失敗只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。

一、涉及技術

jquery、vue、php

二、Promise簡介

MDN官方文檔：Promise

三種狀態：

Pending（進行中）

Resolved（已完成，又稱 Fulfilled）

Rejected（已失?。?/p>

只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。

三、常用方法

Promise.resolve()

Promise.reject()

Promise.prototype.catch()

Promise.prototype.then()

Promise.all()

Promise.race()

四、簡單示例 1、多個Promise使用

var promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("hello");
    }, 1000);
});
promise.then(function(str) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(str+" world");
        }, 1000);
    });
}).then(function(str) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(str+" !");
        }, 1000);
    });
}).then(function(str) {
    console.log(str); // 3秒后打印 hello world !
});

2、catch與finaly

var promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        reject("異步報錯~");
    }, 1000);
}).catch(function(err) { // 捕獲reject暴露的錯誤
    console.log(err);
}).finally(function() { // 不管resolve/reject都執行
    console.log("complete");
});

五、前后端配合 1、單個Promise

后端數據

demo.php

// 獲取隨機字符串
function getRandChar($length) {
    $str = "";
    $strPol = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz";
    $max = strlen($strPol)-1;
    for($i=0;$i<$length;$i++){
        $str.=$strPol[rand(0,$max)];
    }
    return $str;
}
if($_GET["action"] == "test") {
    $data = [
        ["name"=>getRandChar(6), "age"=>rand(1,50)],
        ["name"=>getRandChar(6), "age"=>rand(1,50)],
        ["name"=>getRandChar(6), "age"=>rand(1,50)],
        ["name"=>getRandChar(6), "age"=>rand(1,50)],
    ];
    echo json_encode($data);
}

前端頁面

demo.html




    
    promise
    
    


    
    
        
            {{ index }} {{ item.name }}

運行結果：

2、Promise.all()

Promise.all(p1, p2, ...)，此方法需要所有的promise都成功才成功。。

var promise1 = new Promise(function(resolve, reject) {
    $.ajax({
        type: "get",
        url: "demo.php?action=test",
        dataType: "json",
        success: function(res) {
            resolve(res);
        },
        error: function() {
            reject("請求報錯~");
        }
    });
});
var promise2 = new Promise(function(resolve, reject) {
    $.ajax({
        type: "get",
        url: "demo.php?action=test",
        dataType: "json",
        success: function(res) {
            resolve(res);
        },
        error: function() {
            reject("請求報錯~");
        }
    });
});
var promiseAll = Promise.all([promise1, promise2]);
promiseAll.then(function(data) {
    console.log(data);
}, function(err) {
    console.log(err);
});

結果

如果我們把其中一個url 改成 demo2.php?action=test 就會請求失敗~

Promise.all() 和 jquery的$.when() 有些類似

$.when()的寫法

var ajax1 = $.ajax({type: "get", url: "demo1.php", data: {}, dataType: "json"}),
    ajax2 = $.ajax({type: "get", url: "demo2.php", data: {}, dataType: "json"}),
    ajax3 = $.ajax({type: "get", url: "demo3.php", data: {}, dataType: "json"});
$.when([ajax1, ajax2, ajax3]).then(function(data1, data2, data3) {
    console.log(data1, data2, data3);
}, function() {
    console.log("%c 請求報錯~", "color: red");
});

3、Promise.race()

Promise.race(p1, p2, ...)，這個方法會返回率先成功的那個，如果都不成功，則執行reject。

var promise1 = new Promise(function(resolve, reject) {
    $.ajax({
        type: "get",
        url: "demo.php?action=test",
        dataType: "json",
        success: function(res) {
            resolve(res);
        },
        error: function() {
            reject("請求報錯~");
        }
    });
});
var promise2 = new Promise(function(resolve, reject) {
    $.ajax({
        type: "get",
        url: "demo.php?action=test",
        dataType: "json",
        success: function(res) {
            resolve(res);
        },
        error: function() {
            reject("請求報錯~");
        }
    });
});

var promiseRase = Promise.race([promise1, promise2]);
promiseRase.then(function(data) {
    console.log(data);
}, function(err) {
    console.log(err);
});

4、多個ajax請求

var app = new Vue({
    el: "#app",
    data: {
        list: []
    },
    methods: {
        ajaxReq: function(resolve, reject) {
            $.ajax({
                type: "get",
                url: "demo.php?action=test",
                dataType: "json",
                success: function(res) {
                    resolve(res);
                },
                error: function() {
                    reject("請求報錯~");
                }
            });
        }
    },
    mounted: function() {
        var promise1 = new Promise((resolve, reject) => {
            this.ajaxReq(resolve, reject);
        });
        promise1.then((data)=> {
            console.log("第一次：", data);
            return new Promise((resolve, reject) => {
                this.ajaxReq(resolve, reject);
            });
        }).then((data) => {
            console.log("第二次：", data);
            return new Promise((resolve, reject) => {
                this.ajaxReq(resolve, reject);
            });
        }).then((data) => {
            console.log("第三次：", data);
        });
    }
});

這是使用了函數封裝，實際上項目中，可能不是這樣的，連貫操作，可能是下一個請求需要上一個請求的返回值

var promise1 = new Promise((resolve, reject) => {
    $.ajax({
        type: "get",
        url: "demo.php?action=test",
        dataType: "json",
        success: function(res) {
            resolve(res, 2);
        },
        error: function() {
            reject("請求報錯~");
        }
    });
});
promise1.then((data)=> {
    if(data.length > 0) {
        return new Promise((resolve, reject) => {
                    $.ajax({
                        type: "get",
                        url: "demo.php?action=test",
                        dataType: "json",
                        success: function(res) {
                            resolve(res.concat(data)); // 因為resolve只能接口一個參數，所以concat了一下
                        },
                        error: function() {
                            reject("請求報錯~");
                        }
                    });
                });   
    }
}).then((data1) => {
    console.log(data1);
});

GPU云服務器云服務器 docker初識初識關系數據庫 Promises promise

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89384.html

初識fetch

摘要：后面可以跟對象，表示等待才會繼續下去執行，如果被或拋出異常則會被外面的捕獲。沒有獲取狀態方法，標準沒有提供獲取當前狀態或者的方法。只允許外部傳入成功或失敗后的回調。這種進度通知的功能還沒有用過，暫不知道如何替代。始終不是很懂fetch的作用，然后查了很多資料，看了一篇不錯的文章，結合自己之前學習的Promise，然后做一篇文章，稍微記錄一下。傳統 Ajax 已死，Fetch 永生雖...

rickchen 2019-08-20 14:49 評論0 收藏0
Generator初識

摘要：一簡介函數是引入的新型函數，用于異步編程，跟對象聯合使用的話會極大降低異步編程的編寫難度和閱讀難度。二簡單示例和注意函數不能直接使用，是通過方法獲取的返回結果，而可以提前終止函數。一、簡介 Generator函數是ES6引入的新型函數，用于異步編程，跟Promise對象聯合使用的話會極大降低異步編程的編寫難度和閱讀難度。與普通函數的區別： function關鍵字與函數名之間有一個...

beita 2019-08-23 14:53 評論0 收藏0
初識JavaScript EventLoop

摘要：指的是計算機系統的一種運行機制。環境中的執行順序是隨機的這一次，徹底弄懂執行機制的規范和實現 showImg(https://segmentfault.com/img/remote/1460000012913034?w=800&h=421); Event Loop指的是計算機系統的一種運行機制。JavaScript采用此機制解決單線程引發相關問題在瀏覽器中的web應用會涉及到.Jav...

ZHAO_ 2019-08-22 13:55 評論0 收藏0
初識vue-element-admin

摘要：最近看了一下項目，它是基于創建的項目創建項目安裝默認手動選擇配置，看個人項目需求支持使用書寫源碼支持。支持代碼風格檢查和格式化。權限驗證那里也做了遞歸的處理不顯示在菜單欄。組件內的在組件內使用可以拿到最近看了一下vue-element-admin項目，它是基于vue-cli3創建的項目創建vue-cli3項目安裝vue-cli npm install -g @vue/cli v...

My_Oh_My 2019-08-26 10:27 評論0 收藏0

發表評論

登陸后可評論

0條評論

codercao

男|高級講師

我要關注我要私信

TA的文章

音頻社交Clubhouse將支持空間音頻，讓聊天更具真實感和生活感

閱讀 1256·2021-09-01 10:30
UCloud智能全球DDoS防御體系：亞太高防UADS-APAC-部署簡單，實時防御、低延時、高可靠

閱讀 2139·2021-07-23 10:38
關于CSS中設置overflow屬性的值為hidden的相關理解

閱讀 909·2019-08-29 15:06
less學習筆記

閱讀 3164·2019-08-29 13:53
Angular項目接入Fundebug監控

閱讀 3285·2019-08-26 11:54
js中性能更好的在數組頭部插入大量數據

閱讀 1840·2019-08-26 11:38
DocumentFragment文檔碎片

閱讀 2381·2019-08-26 10:29
「組件」設計一款Grid組件

閱讀 3136·2019-08-23 18:15

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

promise初識

相關文章

初識fetch

Generator初識

初識JavaScript EventLoop

初識vue-element-admin

發表評論

0條評論

codercao

男|高級講師

TA的文章

音頻社交Clubhouse將支持空間音頻，讓聊天更具真實感和生活感

UCloud智能全球DDoS防御體系：亞太高防UADS-APAC-部署簡單，實時防御、低延時、高可靠

關于CSS中設置overflow屬性的值為hidden的相關理解

less學習筆記

Angular項目接入Fundebug監控

js中性能更好的在數組頭部插入大量數據

DocumentFragment文檔碎片

「組件」設計一款Grid組件

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

promise初識

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！