[JS] promise reject catch探究

目标:
1、看try…catch… 与 .then().catch() 的catch有什么不同。
2、在promise中throw err能否被两种catch捕捉到。

先贴用到的代码

会有handle1, handle2, handle3, handle4对应四种不同的情况
运行结果和结论都写在各行代码之后了。
先写结论:
1、 .then.catch中catch的优先级高于try…catch…中的catch;
2、 在promise中throw会将promise实例变为rejected状态;
3、 异步的情况下，try…catch…中的catch无法处理rejected状态的promise.

async function axiosLike(isSuccess, info = {}) {
return new Promise((resolve, reject) => {
if (isSuccess) {
if (info.code === “0”) {
resolve(info.data);
} else {
reject(info.msg);
}
} else {
throw “serve err”;
}
});
}

const tempInfoSuccess = {
code: “0”,
data: { name: “mike”, age: 15 },
msg: “success”,
};
const tempInfoFailed = {
code: “2”,
data: { name: “mike”, age: 15 },
msg: “unknow exception”,
};

async function handle1(isSuccess, info = {}) {
try {
const res = await axiosLike(isSuccess, info);
console.log(“res->”, res);
} catch (err) {
console.log(“err->”, err);
}
}

// handle1(true, tempInfoSuccess); // res-> { name: “mike”, age: 15 }
// handle1(true, tempInfoFailed); // err-> unknow exception
// handle1(false); // err-> serve err

// try…catch 的catch会捕获 reject()的状态,且能够拿到reject(err)中的err
// try…catch 的catch也会捕获 throw抛出的异常 并且也能拿到 throw err 的 err

function handle2(isSuccess, info = {}) {
axiosLike(isSuccess, info)
.then((res) => {
console.log(“res->”, res);
})
.catch((err) => {
console.log(“err->”, err);
});
}

// handle2(true, tempInfoSuccess); // res-> { name: “mike”, age: 15 }
// handle2(true, tempInfoFailed); // err-> unknow exception
// handle2(false); // err-> serve err

// Promise.then().catch() 中的catch会捕获 reject()的状态,且能够拿到reject(err)中的err
// Promise.then().catch() 中的catch也会捕获 throw抛出的异常 并且也能拿到 throw err 的 err

function handle3(isSuccess, info = {}) {
try {
axiosLike(isSuccess, info)
.then((res) => {
console.log(“res->”, res);
})
.catch((err) => {
console.log(“err in .then.catch ->”, err);
});
} catch (err) {
console.log(“err in try…catch ->”, err);
}
}

// handle3(true, tempInfoFailed); // err in .then.catch -> unknow exception
// handle3(false); // err in .then.catch -> serve err
//

function handle4(isSuccess, info = {}) {
try {
axiosLike(isSuccess, info).then((res) => {
console.log(“res->”, res);
});
} catch (err) {
console.log(“err in try…catch ->”, err);
}
}

// handle4(true, tempInfoFailed); // 报错如下 ↓
/
UnhandledPromiseRejectionWarning: unknow exception
UnhandledPromiseRejectionWarning: Unhandled promise rejection.
This error originated either by throwing inside of an async function without a catch block,
or by rejecting a promise which was not handled with .catch().
/
// try…catch 的catch不能处理rejected状态的promise.

handle4(false); // 报错如下 ↓
/
UnhandledPromiseRejectionWarning: serve err
UnhandledPromiseRejectionWarning: Unhandled promise rejection.
This error originated either by throwing inside of an async function without a catch block,
or by rejecting a promise which was not handled with .catch().
/
// throw err 也将promise实例变为了rejected状态,而try…catch 的catch不能处理

// 观察handle4()的两条执行结果,可以发现,异步结果中的报错,try…catch中的catch是无法处理的。