JavaScript中的then和catch方法详解
在JavaScript中,Promise是一种用于处理异步操作的对象。Promise对象代表一个异步操作的最终完成或失败,并且其最终返回一个值。在Promise对象上,我们经常使用then和catch方法来处理操作成功和失败的情况。
then方法
then方法是Promise对象实例的一个方法,它用于注册当Promise对象状态发生改变时的回调函数。then方法接受两个参数:一个成功的回调函数和一个失败的回调函数。当Promise对象由pending状态变为fulfilled状态时,将会调用成功的回调函数;当Promise对象由pending状态变为rejected状态时,将会调用失败的回调函数。
示例代码如下:
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
const random = Math.random();
if (random > 0.5) {
resolve(random);
} else {
reject("出现错误");
}
}, 1000);
});
promise.then(
(value) => {
console.log("成功:", value);
},
(error) => {
console.log("失败:", error);
}
);
在上面的示例中,我们创建了一个Promise对象,该Promise对象在1秒后返回一个随机数。如果随机数大于0.5,则调用成功的回调函数输出”成功”;否则调用失败的回调函数输出”失败”。
catch方法
catch方法是Promise对象实例的一个方法,它用于注册当Promise对象发生rejection时的回调函数。catch方法只接收一个参数,即失败的回调函数。
示例代码如下:
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject("出现错误");
}, 1000);
});
promise.catch((error) => {
console.log("失败:", error);
});
在上面的示例中,我们创建了一个Promise对象,在1秒后返回一个rejected状态的Promise对象,并通过catch方法注册了一个失败的回调函数来处理错误信息。
then和catch方法的链式调用
在实际开发中,我们通常会将then方法和catch方法进行链式调用,以便更好地处理异步操作的结果。then方法会返回一个新的Promise对象,因此我们可以对返回的Promise对象继续调用then方法或catch方法。
示例代码如下:
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
const random = Math.random();
if (random > 0.5) {
resolve(random);
} else {
reject("出现错误");
}
}, 1000);
});
promise
.then((value) => {
console.log("成功:", value);
return value * 2;
})
.then((newVal) => {
console.log("新值:", newVal);
})
.catch((error) => {
console.log("失败:", error);
});
在上面的示例中,我们首先返回一个Promise对象,然后对返回的Promise对象调用then方法,将成功的回调函数中的值乘以2,并返回一个新的Promise对象。然后对新的Promise对象调用then方法,继续处理后续的操作。
总结
在JavaScript中,Promise对象提供了一种优雅的方式来处理异步操作,通过then和catch方法,我们可以更好地处理异步操作的成功和失败情况。通过链式调用then方法,我们可以实现复杂的异步操作逻辑。