0%

javascript-promise-then

Promise被reject时,then方法会执行吗?

promise.protyto.then什么时候会执行?我的印象里只有promise状态为fullfilled时才会执行,其实是不对的,promise状态为reject时,同样可以执行then方法。

先来看一个最常规的应用,我们在写代码时都是thencatch配合使用的。

1
2
3
4
5
6
7
8
9
10
11
12
13
const fetchData = async () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success in fetchData');
}, 100);
});
};

fetchData().then((data) => {
console.log(data);
}).catch((error) => {
console.log(error);
});

我们在fetchData中使用setTimeout模拟了一个异步操作,100ms后resolve,这时then中的回调函数会被执行,打印出success in fetchData

同理,假设100ms后reject这个promise,那么会打印出: error in fetchData

1
2
3
4
5
6
7
8
9
10
11
12
13
const fetchData = async () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('error in fetchData');
}, 100);
});
};

fetchData().then((data) => {
console.log(data);
}).catch((error) => {
console.log(error);
});

在常规使用中,我们只给then传了一个方法作为参数,但是then其实可以接受两个参数的。如果我们传递了第二个参数,那么当promise状态为reject时,第二个参数对应的方法会被执行。

1
2
then(onFulfilled)
then(onFulfilled, onRejected)

所以,修改一下上面的代码,我们可以这样写:

1
2
3
4
5
6
7
8
9
10
11
12
13
const fetchData = async () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('error in fetchData');
}, 100);
});
};

fetchData().then((data) => {
console.log(data);
}, (error) => {
console.log(error);
});

这样,当promise状态为reject时,第二个参数对应的方法会被执行,打印出error in fetchData。这和使用catch的效果是一样的。

那么如果我们既传递了then中的第二个参数onRejected又使用了catch,结果会怎样呢?我们来看一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const fetchData = async () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('error in fetchData');
}, 100);
});
};

fetchData().then((data) => {
console.log(data);
}, (error) => {
console.log(error);
}).catch((error) => {
console.log('catch:', error);
});

此时打印出的结果是error in fetchData,因为then中的第二个参数会优先被执行,catch不会被执行。

Promise.then中抛出的异常会被catch捕获吗?

Promise.then中抛出的异常会被catch捕获吗?我们来看一个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const fetchData = async () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success in fetchData');
}, 100);
});
};

fetchData().then((data) => {
console.log(data);
throw new Error('error in then');
}).catch((error) => {
console.log(error);
});

then中,我们抛出了一个异常,这个异常会被catch捕获吗?答案是会的,打印出Error: error in then