Promise的中文意思是承诺。可以通俗的理解为: 把这个任务(函数)交给我,我来完成。
Promise是JavaScript中用于处理异步操作的一个关键概念。
它代表了一个尚未完成但预期在将来完成的操作。
使用Promise可以避免所谓的回调地狱,即多层嵌套的回调函数,从而使代码更加清晰和易于维护。
let promise = new Promise(function(resolve, reject) {
// 异步操作代码
setTimeout(() => {
resolve("操作成功");
}, 1000);
});
promise.then((value) => {
console.log(value);
});
一个Promise有三种可能的状态:
- pending(待定): 初始状态,即不是成功,也不是失败
- fulfilled(已实现): 意味着操作成功完成
- rejected(已拒绝): 意味着操作失败
let fulfilledPromise = Promise.resolve('成功');
let rejectedPromise = Promise.reject('失败');
fulfilledPromise.then(value => console.log(value)); // 输出成功
rejectedPromise.catch(error => console.log(error)); // 输出失败
Promise的另一个优点是可以通过链式调用.then()和.catch()方法来处理复杂的异步流程。
new Promise((resolve, reject) => {
setTimeout(() => resolve(1), 1000)
})
.then(result => {
console.log(result); // 输出1
return result * 2;
})
.then(result => {
console.log(result); // 输出2
return result * 3;
})
.then(result => {
console.log(result); // 输出3
return result * 4;
})
.catch(error => {
console.log('error')
});
Async和Await是建立在Promise之上的高级抽象,使得异步代码的编写和阅读更加接近于同步代码的风格。
通过在函数声明前加上async关键字,可以将任何函数转换为返回Promise的异步函数。
这意味着你可以使用.then()和.catch()来处理它们的结果。
async function asyncFunction() {
return "异步操作完成";
}
asyncFunction().then(value => console.log(value)); // 异步操作完成
await关键字只能在async函数内部使用。
它可以暂停async函数的执行,等待Promise的解决(resolve),然后以Promise的值继续执行函数。
async function asyncFunction() {
let promise = new Promise((resolve, rejct) => {
setTimeout(() => resolve("完成"), 1000)
});
let result = await promise; // 等待,直到promise解决
console.log(result);
}
asyncFunction();
使用await可以像同步代码一样处理异步任务,避免了过多的.then()嵌套。
所有await必须放在async函数中。
在async/await中,错误处理可以通过传统的try...catch语句实现,这使得异步代码的错误处理更加直观。
async function asyncFunction() {
try {
let response = await fetch('http://example.com');
let data = await response.json();
} catch (error) {
console.log('error');
}
}
asyncFunction();
在实际应用中,async和await使得处理复杂的异步逻辑更加简单,尤其是在涉及多个依次执行的异步操作时。
虽然async/await在很多情况下可以提供更加清晰和简洁的代码,但Promise也有其独特的优势。
例如,处理多个并行异步操作时,需要并行执行并等待它们全部完成,使用Promise.all()通常是更好的选择。