关于前端:JS-promise-reject-catch探究

41次阅读

共计 2676 个字符,预计需要花费 7 分钟才能阅读完成。

同步更新到本人的语雀,格局更容易看。能够移步:
https://www.yuque.com/diracke…

指标:
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 是无奈解决的。

正文完
 0