在jQuery中递延和承诺对象-DEV365 开发者社区

jQuery 是一个开源JavaScript库，简化了HTML/CSS文档之间的相互作用，或更准确地说是文档对象模型（DOM）和JavaScript。当今唯一满足设计师和程序员需求的库是JQuery。

递延对象

jQuery中的递延对象是一个可以创建 Promise 并将其状态更改为解决的对象，或被拒绝。当执行异步任务的函数时，它将创建。

使用递延对象的基本语法是 -

var deferred = $.Deferred();

deferred.done(function(result) {
    // success callback
}).fail(function(error) {
    // failure callback
}).progress(function(progress) {
    // progress callback
});

承诺对象

承诺对象是对未来价值的承诺。它可用于注册回调，该回调将在成功完成时执行。

使用Promise对象的基本语法是 -

var promise = $.ajax({url: 'example.com/api/data'});

promise.done(function(result) {
    // success callback
}).fail(function(error) {
    // failure callback
}).always(function() {
    // callback to be executed regardless of success or failure
});

递延对象中使用的方法 -

分辨（[args]）：它可以解决递延对象并触发所有成功的回调。
拒绝（[args]）：它拒绝递延对象并触发所有失败的回调。
完成（回调）：成功解决递延对象时要执行的回调。
失败（回调）：它会在拒绝延期对象时注册要执行的回调。
进度（回调）：它在延期对象发送进度更新时要执行一个回调。
始终（回调）：它注册一个要执行的回调，无论是否解决或拒绝递延对象。

承诺对象中使用的方法 -

完成（回调）：它在成功解决承诺对象时要执行一个回调。
失败（回调）：它会在拒绝承诺对象时注册要执行的回调。
始终（回调）：它注册一个要执行的回调，无论是否解决或拒绝承诺对象。
然后（SuccessCallback，FailureCallback）：它立即注册成功和失败回调。
catch（failureCallback）：它在拒绝承诺对象时注册要执行的回调。

在项目中包括jQuery：

有多种方法可以在您的项目中开始使用jQuery：

使用Google hosted/microsoft-onstred 内容传递网络（CDN）包括JQuery版本。
从官方jQuery网站下载自己的jQuery版本，并在服务器或本地文件系统上托管。

示例1

在此示例中，我们将使用jQuery看到延期对象的工作。

在您的html文件中写下以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>Deferred Object Example</title>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>        

<body>
    <h1>This is an example of Deferred Object in jQuery</h1> 
    <h3>welcome to DEV</h3>
    <div id="result"></div>
    <script>
        function fetchData() {
            var deferred = $.Deferred();

            // Simulate an asynchronous operation 
            // that takes 3 seconds
            setTimeout(function() {
              var data = { id: 123, name: "John" };
              deferred.resolve(data);
            }, 3000);

            return deferred.promise();
        }

        $(document).ready(function() {
            // Call the fetchData function and 
            // register callbacks for success and failure
            fetchData().done(function(data) {
                $("#result").text("Data retrieved: " 
                                  + JSON.stringify(data));
            }).fail(function(error) {
                $("#result").text("Error: " + error);
            });
        });
    </script>
</body>
</html>

输出：

javascript 代码从称为 fetchdata（）的函数开始。此函数使用 $。递延（）创建一个新的延期对象，并将其分配给延期 varible。
在 fetchdata（）函数中，有一个模拟的异步操作，由 settimeout 函数表示。它延迟执行3秒钟，然后用包含ID和名称的数据对象解析递延对象。
在 $（document）.ready（）函数中， fetchdata（）函数被调用。返回的承诺用于使用 .done（）和 .fail（） methods。

示例2

在此示例中，我们将使用jQuery看到 Promise 对象的工作。

在您的html文件中写下以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promise Object Example</title>
</head>
<body>
    <h1>This is an example of Promise object in jQuery</h1> 
    <h3>welcome to DEV</h3>

    <div id="data"></div>

    <script>
        function fetchData() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const data = { id: 1, name: 'John Doe' };
                    // simulate a successful API call
                    resolve(data);
                    // simulate an error response from the API
                    // reject(new Error('Failed to fetch data'));
                }, 2000);
            });
        }

        fetchData().then((data) => {
            const dataDiv = document.getElementById('data');
            dataDiv.innerText = JSON.stringify(data);
         }).catch((error) => {
            console.error('Error:', error);
        });
    </script>
</body>
</html>

输出：

JavaScript代码定义函数 fetchdata（）。在此功能中，使用Promise构造函数创建了一个新的Promise对象。
Promise构造函数具有2个参数 - Resolve 和 recove 。这些参数是用于指示异步操作的成功或失败的函数。
在 fetchdata（）函数之外，Promise对象用于使用。方法。

递延对象的优点和缺点 -

优点：

使用递延对象的使用使用户可以轻松地将异步操作组合在一起。

递延对象提供了处理成功和失败异步操作的一致接口。

缺点：

递延对象是jQuery独有的，因此不能在其他JavaScript框架中使用。

使用延期对象可以在处理时间和内存使用方面向代码添加一些开销。

承诺对象的优势和缺点 -

优点：

承诺很容易被束缚或组合在一起。这使得处理多个异步操作变得更加简单。

承诺提供了一个更标准化的接口，用于处理异步操作与回调和递延对象相比。

缺点：

承诺没有内置支持取消异步操作，这在某些情况下可能是有问题的。

与其他方法相比

就是这样！您已经成功地了解了jQuery中的递延和承诺对象！

在LinkedIn上与我联系：-Linkedin

请查看我的GitHub，以了解惊人的项目：-Github

vy我的个人投资组合：-Aryan's Portfolio