在JavaScript中,承诺是一个内置对象,代表异步操作的最终完成(或失败)及其结果值。它提供了一种更干净,更有条理的方法来处理异步代码,避免了臭名昭著的callback hell
。
这是如何在JavaScript中使用Promises
的示例:
const getData = () => {
return new Promise((resolve, reject) => {
// Perform an asynchronous operation, such as fetching data from an API Currently we are taking static data for example.
const data = { id: 1, name: "Sam Adam" };
if (data) {
// If the operation is successful, call the "resolve" method with the data
resolve(data);
} else {
// If there's an error, call the "reject" method with the error message
reject("Error: Unable to retrieve data.");
}
});
};
// Call the Promise function and handle the response using "then" and "catch" methods
getData()
.then((data) => {
console.log("Data retrieved successfully:", data);
})
.catch((error) => {
console.error("Error occurred while retrieving data:", error);
});
在上面的示例中,getData()
函数返回一个诺言对象,该对象执行了从API获取数据的asynchronous
操作。如果操作成功,则承诺将带有数据的resolve()
方法调用,如果有错误,它将带有错误消息的reject()
方法。
要处理承诺的响应,您可以使用then()
和catch()
方法。成功解决承诺并将数据作为参数接收时,将调用then()
方法。当承诺被错误拒绝时,将调用catch()
方法,并且将错误消息作为参数接收。
链接承诺
const getData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = { id: 1, name: "John Doe" };
if (data) {
resolve(data);
} else {
reject(new Error("Unable to retrieve data."));
}
}, 2000);
});
};
const getDetails = (data) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const details = { age: 30, city: "New York" };
if (details) {
resolve({ ...data, ...details });
} else {
reject(new Error("Unable to retrieve details."));
}
}, 2000);
});
};
getData()
.then(getDetails)
.then((result) => {
console.log(result); // Output: { id: 1, name: "John Doe", age: 30, city: "New York" }
})
.catch((error) => {
console.error(error);
});
在上面的示例中,我们有两个承诺getData()
和getDetails()
,它们模拟了从API获取数据。 getDetails()
承诺取决于getData()
Promise返回的数据。我们使用then()
方法将这些承诺链在一起。 then()
方法采用回调函数,返回另一个承诺。第一个承诺返回的值作为参数传递给第二个承诺的回调函数。可以根据需要重复此过程。
我们使用getData()
承诺来检索一些数据,然后将getDetails()
链许可链接检索有关该数据的其他详细信息。最后,我们使用then()
方法记录两个诺言的结果。
Promise.all()
Promise.all()
方法允许您并行运行多个承诺,并等待所有这些承诺完成。该方法将一系列承诺作为论点,并返回一个新的承诺,该承诺在阵列中的所有承诺都已实现时实现。
const promise1 = new Promise((resolve) => setTimeout(resolve, 2000, "foo"));
const promise2 = 10;
const promise3 = new Promise((resolve) =>
setTimeout(resolve, 3000, "bar")
);
Promise.all([promise1, promise2, promise3]).then((values) =>
console.log(values)
);
// Output: ["foo", 10, "bar"]
在上面的示例中,我们创建了三个承诺,并将其传递给Promise.all()
方法。 then()
方法用于记录承诺返回的值的数组。
Promise.race()
Promise.race()
方法允许您并行运行多个承诺,并返回实现的第一个承诺的值。
const promise1 = new Promise((resolve) => setTimeout(resolve, 2000, "foo"));
const promise2 = new Promise((resolve) =>
setTimeout(resolve, 3000, "bar")
);
Promise.race([promise1, promise2]).then((value) => console.log(value));
// Output: "foo"
在上面的示例中,我们创建两个承诺并将其传递给Promise.race()
方法。 then()
方法用于记录实现的第一个承诺的价值。在这种情况下,promise1
首先要实现,因此其值(“ foo”)已记录。
Summary
承诺是JavaScript中使用异步代码的强大工具。它们允许您以更具结构化和可读性的方式处理异步操作的成功和失败。除了then()
和catch()
方法外,您还可以与then()
方法一起链接承诺,并与Promise.all()
和Promise.race()
方法并行运行多个承诺。