一、Promise的基础用法
Promise是ES6中新增的异步编程解决方案,是一种封装回调函数的解决方案。Promise有三个状态:pending(等待中)、fulfilled(已成功)、rejected(已失败)。Promise通过执行异步操作后返回一个promise实例,提供then()、catch()方法用来处理操作成功和失败后对应的回调函数。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Promise Resolved"); //操作成功
}, 2000);
});
promise.then((result) => {
console.log(result); //打印出"Promise Resolved"
})
以上代码中定义了一个promise对象,通过setTimeout模拟异步操作。当异步操作成功后resolve()方法被调用,将会触发promise的then()方法调用并输出“Promise Resolved”。
二、Promise的链式调用
Promise也支持链式调用,这样不仅方便传递数据,还能保证操作的顺序性和可读性。
const firstPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("First Promise Resolved");
}, 2000);
});
const secondPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Second Promise Resolved");
}, 3000);
});
firstPromise.then((result) => {
console.log(result); //输出"First Promise Resolved"
return secondPromise; //返回第二个promise对象
})
.then((result) => {
console.log(result); //输出"Second Promise Resolved"
})
以上代码中,firstPromise和secondPromise分别模拟两个异步操作,firstPromise的返回结果往下传递到了第二个then()方法中。这样我们可以轻松地通过链式调用来操作多个异步操作。
三、Promise的错误处理
在异步操作中可能会出现错误,我们可以通过Promise的catch()方法来处理错误。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject("Promise Rejected"); //操作失败
}, 2000);
});
promise.then((result) => {
console.log(result);
})
.catch((error) => {
console.log(error); //打印出"Promise Rejected"
})
以上代码中,模拟异步操作失败,会首先调用reject()方法。catch()方法会捕捉到错误信息并输出。
四、Promise.all()用法
Promise.all()方法可以接收一个可迭代的对象(如:数组),并执行多个promise对象。当所有promise都执行成功后返回一个结果数组,其中包含所有promise的返回值。
const firstPromise = Promise.resolve(1);
const secondPromise = Promise.resolve(2);
const thirdPromise = Promise.resolve(3);
Promise.all([firstPromise, secondPromise, thirdPromise])
.then((results) => {
console.log(results); //输出[1, 2, 3]
})
以上代码中,Promise.all()方法接收一个包含3个promise的数组,这些异步操作同时启动,紧接着我们通过then()方法获取返回值。
五、Promise.race()用法
Promise.race()方法和Promise.all()方法不同,Promise.race()的返回值是第一个完成的Promise的返回值。
const firstPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("First Promise Resolved");
}, 2000);
});
const secondPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Second Promise Resolved");
}, 3000);
});
Promise.race([firstPromise, secondPromise])
.then((result) => {
console.log(result); //输出"First Promise Resolved"
})
以上代码中,我们同时启动两个异步操作。Promise.race()方法输出的结果是其中第一个完成的promise操作。
六、Promise.resolve()和Promise.reject()方法
Promise.resolve()和Promise.reject()方法是一种快速创建Promise对象的方式。
//Promise.resolve()方法
Promise.resolve("Promise Resolved")
.then((result) => {
console.log(result); //输出"Promise Resolved"
})
//Promise.reject()方法
Promise.reject("Promise Rejected")
.catch((error) => {
console.log(error); //输出"Promise Rejected"
})
Promise.resolve()方法会立即执行并返回一个处理成功的promise对象,Promise.reject()方法则立即返回一个处理失败的promise对象。
七、Promise和async/await的使用
async/await是ES7的新特性,它提供了一种更加简单、易于读取的方式来编写异步代码。
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
async function asyncCall() {
console.log('calling');
const result = await resolveAfter2Seconds();
console.log(result); // 输出"resolved"
}
asyncCall();
以上代码中,resolveAfter2Seconds()方法模拟一个异步操作,asyncCall()函数中使用了async关键字来定义异步函数。使用await关键字,让异步操作的执行等待异步操作的完成,然后将返回值存储在result变量中。
八、总结
Promise可以帮助我们更加简单、方便、直观地管理异步代码,通过使用Promise能够让我们的代码变得更加清晰、易于维护和理解。