Promise用法

mrwendao
73 阅读4分钟

Promise是一种用于异步编程的解决方案，它可以让异步操作更加简单、易读和易于维护。Promise对象代表一个异步操作的最终完成或失败，并返回一个值或错误信息。

Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。当一个Promise对象处于pending状态时，表示异步操作正在进行中；当异步操作完成时，Promise对象会变为fulfilled状态或rejected状态。

Promise对象有两个重要的方法：then()和catch()。then()方法用于处理Promise对象的成功状态，catch()方法用于处理Promise对象的失败状态。这两个方法都可以链式调用，使得代码更加流畅和易于组合。

Promise对象还有一个重要的特点是可以链式调用。这意味着一个Promise对象的then()方法可以返回另一个Promise对象，从而形成一个Promise对象的链式调用。这种链式调用可以让异步操作更加流畅和易于组合。

总之，Promise是一种非常强大的异步编程解决方案，它可以让异步操作更加简单、易读和易于维护。Promise已经被广泛应用于JavaScript和其他编程语言中的异步编程。

关键点：

  • Promise是一种用于异步编程的解决方案
  • Promise对象代表一个异步操作的最终完成或失败，并返回一个值或错误信息
  • Promise对象有三种状态：pending、fulfilled和rejected
  • Promise对象有两个重要的方法：then()和catch() Promise对象可以链式调用，使得代码更加流畅和易于组合
  • Promise是一种非常强大的异步编程解决方案，已经被广泛应用于JavaScript和其他编程语言中的异步编程

用例

一个具体的Promise用例是通过Promise对象实现异步加载图片。在这个用例中，我们可以使用Promise对象来加载图片，并在加载完成后将其显示在页面上。

function loadImage(url) {
	return new Promise((resolve, reject) => {
		const img = new Image();
		img.onload = () => {
			resolve(img);
		};
		img.onerror = () => {
			reject(new Error(`Failed to load image from ${url}`));
		};
		img.src = url;
	});
}

loadImage('<https://example.com/image.jpg>')
.then(img => {
	document.body.appendChild(img);
})
.catch(error => {
	console.error(error);
});

在这个例子中，我们定义了一个loadImage函数，它返回一个Promise对象。当调用loadImage函数时，它会创建一个新的Image对象，并将其src属性设置为传入的URL。如果图片成功加载，Promise对象将进入fulfilled状态，并将Image对象作为参数传递给then()方法。如果图片加载失败，Promise对象将进入rejected状态，并将一个错误对象作为参数传递给catch()方法。

在then()方法中，我们将Image对象添加到页面上。如果图片加载失败，则会在控制台中输出错误信息。

这个例子展示了Promise对象的链式调用和错误处理机制。它可以让我们更加方便地处理异步操作，并将代码写得更加简洁和易于维护。

关键点：

  • Promise对象可以用于异步加载图片等操作
  • Promise对象的then()方法用于处理
  • Promise对象的成功状态
  • Promise对象的catch()方法用于处理
  • Promise对象的失败状态
  • Promise对象可以链式调用
  • Promise对象可以让我们更加方便地处理异步操作，并将代码写得更加简洁和易于维护

Promise.all()

Promise.all() 方法可以用于处理多个异步请求，它可以接受一个 Promise 数组作为参数，并返回一个新的 Promise 对象。当所有的 Promise 对象都成功完成时，Promise.all() 返回的 Promise 对象才会进入 fulfilled 状态，否则进入 rejected 状态。

例如，我们可以使用 Promise.all() 方法来同时发送多个异步请求，如下所示：

let promise1 = new Promise()
let promise2 = new Promise()
let promise3 = new Promise()

Promise.all([promise1, promise2, promise3]).then(function(results) {
  console.log(results[0].data);
  console.log(results[1].data);
  console.log(results[2].data);
}).catch(function(error) {
  console.log(error);
});

在上面的代码中，我们使用 axios 发送了三个 GET 请求，并将它们保存在三个 Promise 对象中。然后，我们使用 Promise.all() 方法来处理这三个 Promise 对象，当它们都成功完成时，then() 方法的回调函数就会被调用，并打印出每个请求的返回数据。如果其中任何一个请求失败，catch() 方法的回调函数就会被调用，并打印出错误信息。

需要注意的是，Promise.all() 方法返回的 Promise 对象只有在所有的 Promise 对象都成功完成时才会成功完成，如果其中任何一个 Promise 对象失败，返回的 Promise 对象就会失败。因此，在使用 Promise.all() 方法时，我们需要确保所有的异步请求都能够成功完成。

avatar
文章
阅读
粉丝