jQuery Deferred 是一种非常强大的 JavaScript 库，它可以帮助开发者管理异步流程，同时提高代码可读性和可维护性。
在前端开发中，jQuery Deferred 最常用于处理 Ajax 请求。在这篇文章里，我们将介绍如何使用 npm 包 jquery-deferred 来管理异步流程。
安装
使用 npm 安装 jquery-deferred，只需要执行以下命令：
npm install jquery-deferred --save
创建一个 Deferred 对象
在我们开始使用 jQuery Deferred 之前，我们需要先创建一个 Deferred 对象。这可以通过调用 jQuery 的 Deferred() 方法来完成，如下所示：
const deferred = $.Deferred();
我们将 Deferred() 方法的返回值赋值给一个变量，这个变量即为我们创建的 Deferred 对象实例。
初始化异步操作
现在，我们需要做的是初始化我们的异步操作，并在这个操作完成时告知 jQuery Deferred 对象。我们可以使用 jQuery 的 $.ajax() 方法来进行异步请求，如下所示：
const url = 'https://api.example.com/data';
const ajaxRequest = $.ajax({
url: url,
type: 'GET',
dataType: 'json'
});我们将 $.ajax() 方法的返回值赋值给一个变量 ajaxRequest。这个方法会向指定的 URL 发送一个 GET 请求，并期望返回一个 JSON 格式的数据对象。
管理异步流程
我们已经创建了一个 Deferred 对象，同时使用 $.ajax() 方法初始化了一个异步操作。现在，我们需要管理异步流程，以确保异步操作完成后，我们的代码能够正确地执行。
异步操作有三种状态：pending(未处理)，resolved(成功)，rejected(失败)。当异步操作正在进行时，它处于 pending 状态。当异步操作成功地完成时，它会进入 resolved 状态；当发生错误时，则会进入 rejected 状态。
我们需要使用 jQuery Deferred 对象提供的方法，来监听异步操作的状态变化，并指定对应的回调函数，以便在异步操作完成后执行相应的代码。
当异步操作成功完成时，我们需要向 Deferred 对象发送一个 resolve 事件。如下所示：
ajaxRequest.done(function(data) {
deferred.resolve(data);
});这里，我们调用了 done() 方法，将一个回调函数作为参数传递给它。当异步请求成功完成时，jQuery 会自动调用这个回调函数。在这个回调函数中，我们向 Deferred 对象发送了一个 resolve 事件，并将接收到的数据传递给了这个事件。
当异步请求遇到错误时，我们需要向 Deferred 对象发送一个 reject 事件。如下所示：
ajaxRequest.fail(function(xhr, status, error) {
deferred.reject(error);
});同样的，我们调用了 fail() 方法，将一个回调函数作为参数传递给它。当异步请求出现错误时，jQuery 会自动调用这个回调函数。在这个回调函数中，我们向 Deferred 对象发送了一个 reject 事件，并将错误信息传递给了这个事件。
完成异步流程
现在，我们已经成功地创建了一个 Deferred 对象，并初始化了一个异步操作。同时，我们已经做好了管理异步流程的准备工作，现在是时候来完成异步流程了。
我们调用 deferred.promise() 方法，将 Deferred 对象转换为一个 Promise 对象，如下所示：
const promise = deferred.promise();
另外，我们还需要使用 Promise 对象提供的 then() 方法来指定异步流程完成后的回调函数，如下所示：
promise.then(function(data) {
console.log('异步请求完成，数据为：', data);
}, function(error) {
console.error('异步请求失败，错误信息为：', error);
});这里，我们调用了 then() 方法，将两个回调函数作为参数传递给它。第一个回调函数在异步操作成功时被调用，第二个回调函数在异步操作失败时被调用。
示例代码
下面是一个完整的示例代码，它将使用 jQuery Deferred 和 $.ajax() 方法来发送一个异步请求，并在请求完成后输出数据或错误信息：
-- -------------------- ---- -------
----- --- - -------------------------------
----- -------- - -------------
----- ----------- - --------
---- ----
----- ------
--------- ------
---
------------------------------- -
-----------------------
---
------------------------------ ------- ------ -
-----------------------
---
----- ------- - -------------------
--------------------------- -
-------------------------- ------
-- --------------- -
------------------------------ -------
---到此为止，我们已经成功地使用 npm 包 jquery-deferred 来管理异步流程了。通过使用 jQuery Deferred 和 Promise，我们可以更好地控制异步请求的流程，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/59730