1. 概述
2. 詳論
3. 參考

1. 概述

在上一篇文章《JavaScript異步編程1——Promise的初步使用》，簡單介紹了一下Promise的初步使用，復習一下，Promise異步編程可以用如下的范式來撰寫：

定義一個函式（function A)，這個函式回傳一個Promise物件，
Promise物件的引數也是一個function B，內部進行了一個異步操作（通常是JavaScript提供的API），
function B物件的引數是兩個回呼函式resolve和reject，如果函式內部進行的異步操作成功，回呼resolve；否則回呼reject，
呼叫function A，回傳一個Promise物件，這樣異步操作就啟動了，
呼叫Promise物件的then方法，引數是resolve和reject的真正回應函式，當異步操作完成了，就會執行相應分支的回應函式，

采用以上范式，可以通過Promise來進行Ajax操作，也就是XMLHttpRequest，畢竟這個操作在Web應用中實在太常見了，

2. 詳論

首先仍然是準備一個HTML頁面：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://www.cnblogs.com/charlee44/archive/2021/04/17/3rdParty/jquery-3.5.1.js"></script>
    <title>樣例</title>
</head>

<body>
    <div id = "container"> </div>
    <script src="https://www.cnblogs.com/charlee44/archive/2021/04/17/PromiseTest.js"></script>
</body>

</html>

如果不使用Promise，那么相應的JavaScript代碼為：

$(function () {

    var url = "./1.json";

    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function () {        
        if (req.status == 200) {
            console.log(req.response);
        } else {           
            throw new Error(req.statusText);
        }
    };

    req.onerror = function () {
        throw new Error("Network Error");
    };

    req.send();
});

可以看到這里仍然是通過事件機制來實作異步行為，接下來采用前面提到的編程范式將其改造成Promise機制：

function get(url) {       
    return new Promise(function (resolve, reject) {      
        var req = new XMLHttpRequest();
        req.open('GET', url);

        req.onload = function () {
            //即使是404也會進入這個相應函式，所以需要檢測狀態
            if (req.status == 200) {
                //完成許諾，回傳回應文本
                resolve(req.response);
            } else {
                //完成未完成，回傳錯誤
                reject(Error(req.statusText));
            }
        };

        // 發生錯誤時的相應函式
        req.onerror = function () {
            reject(Error("Network Error"));
        };

        // 發送請求
        req.send();
    });
}

var addressUri = "./1.json";
get(addressUri).then(function (response) {
    console.log("Success!", response);      
}, function (error) {
    console.error("Failed!", error);
});

改造成Promise的程序與上一章并沒有什么不同，只不過函式內部呼叫XMLHttpRequest的流程更加復雜些，這兩個例子都是將事件改造成Promise，那不是意味著對于異步編程而言，Promise要優于事件呢？

不能完全這么肯定，但是可以確定的是事件并不總是異步編程的最優實踐，一個很顯然的問題就是：事件很適合處理在同一物件上多次發生的事情，但是事件偵聽器的回應函式可能并不是我們想要的——更多情況下，我們只想要直到兩個狀態，當異步操作完成的時候該做什么，當異步操作失敗的時候又該做什么，而這正是Promise擅長處理的，

例如這里的XMLHttpRequest操作，事件回應函式onload中的所有行為，并不都是異步請求成功時需要完成的，只有檢測訪問請求狀態為200時候，才需要進行請求成功時的回呼函式，使用Promise，可以更準確的進行異步行為，

3. 參考

Ajax原理-原生js的XMLHttpRequest物件意義
Javascript異步編程的4種方法

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

標籤：其他

上一篇：JavaScript異步編程2——結合XMLHttpRequest使用Promise

下一篇：CSS浮動---float