Promises 是 JavaScript 中处理异步操作的一种模式，它代表了一个可能现在、将来或永远都不会完成的操作的最终结果。Promises 提供了一种逃离回调地狱的方法，使得异步代码更加清晰和易于维护。在本文中，我将介绍几个 Promises 的使用示例，并提供完整的 HTML 代码。
什么是 Promises？Promise 是一个代表了异步操作最终完成或失败的对象。它有三种状态：
Pending（进行中）Fulfilled（已成功）Rejected（已失败）当 Promise 成功时，它会返回一个值；当它失败时，它会返回一个原因（error）。
示例1：加载图片在这个例子中，我们将创建一个 Promise 来加载图片，并在图片加载完成后将其显示在页面上。
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Promise 示例：加载图片</title> <style> #imageContainer { margin-top: 20px; } </style></head><body> <button id="loadImageButton">加载图片</button> <div id="imageContainer"></div> <script> function loadImage(url) { return new Promise(function(resolve, reject) { const image = new Image(); image.onload = function() { resolve(image); }; image.onerror = function() { reject(new Error('图片加载失败')); }; image.src = url; }); } document.getElementById('loadImageButton').addEventListener('click', function() { loadImage('https://via.placeholder.com/150').then(function(image) { document.getElementById('imageContainer').appendChild(image); }).catch(function(error) { console.error(error); }); }); </script></body></html>
在这个例子中，loadImage 函数返回一个新的 Promise 对象。我们为图片的 onload 和 onerror 事件分别设置了 resolve 和 reject 处理函数。当按钮被点击时，我们调用 loadImage 函数并处理成功和失败的情况。
示例2：异步数据获取下面的例子展示了如何使用 Promises 来处理异步的数据获取操作。我们将通过 fetch API 发起一个网络请求，并在数据获取成功后更新页面。
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Promise 示例：异步数据获取</title></head><body> <button id="fetchDataButton">获取数据</button> <pre id="dataContainer"></pre> <script> function fetchData(url) { return fetch(url).then(function(response) { if (!response.ok) { throw new Error('网络请求失败'); } return response.json(); }); } document.getElementById('fetchDataButton').addEventListener('click', function() { fetchData('https://mock.apifox.com/m1/2209590-0-default/pet/1').then(function(data) { document.getElementById('dataContainer').textContent = JSON.stringify(data, null, 2); }).catch(function(error) { console.error(error); }); }); </script></body></html>
在这个例子中，fetchData 函数使用 fetch API 发起一个 GET 请求，并返回一个 Promise。我们在按钮的点击事件中调用 fetchData 函数，并在 Promise 解决后更新页面上的内容。
示例3：Promise链Promises 可以被链式调用，这意味着你可以在一个 Promise 完成后立即开始另一个异步操作。下面的例子展示了如何使用 Promise 链来顺序执行多个异步任务。
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Promise 示例：Promise链</title></head><body> <button id="sequenceActionsButton">顺序执行操作</button> <div id="resultContainer"></div> <script> function firstAction() { return new Promise(function(resolve) { setTimeout(function() { resolve('第一个操作完成'); }, 1000); }); } function secondAction(firstResult) { return new Promise(function(resolve) { setTimeout(function() { resolve(`${firstResult} -> 第二个操作完成`); }, 1000); }); } function thirdAction(secondResult) { return new Promise(function(resolve) { setTimeout(function() { resolve(`${secondResult} -> 第三个操作完成`); }, 1000); }); } document.getElementById('sequenceActionsButton').addEventListener('click', function() { firstAction().then(function(result) { return secondAction(result); }).then(function(result) { return thirdAction(result); }).then(function(result) { document.getElementById('resultContainer').textContent = result; }); }); </script></body></html>
在这个例子中，我们定义了三个函数，每个函数都返回一个 Promise。当按钮被点击时，我们顺序执行这三个操作，并在每个操作完成后将结果更新到页面上。
结论Promises 提供了一种强大的方式来处理 JavaScript 中的异步操作。通过使用 Promises，你可以编写出更加清晰、易于理解和维护的代码。上述例子展示了 Promises 在实际应用中的不同场景，希望这些例子能帮助你更好地理解和使用 Promises。
