can't call .catch on a function unless it's wrapped? - asynchronous

Question

I have an async function such as this
router.get("/", async function (req, res, next) {
const posts = await Post.find({});
res.render("index", { title: "Homepage", posts });
});
and I can wrap it in a function that handles its catch
function catchAsync(fn) {
return function (req, res, next) {
fn(req, res, next).catch((e) => next(e));
};
}
so it looks like this
router.get(
"/",
catchAsync(async function (req, res, next) {
const posts = await Post.find({});
res.render("index", { title: "Homepage", posts });
})
);
but my doubt, and the reason for this post, is why can't I call .catch directly on the async function, like so?
router.get(
"/",
async function (req, res, next) {
const posts = await Post.find({});
res.render("index", { title: "Homepage", posts });
}.catch((e) => next(e))
);
I understand I can do this however
router.get("/", async function (req, res, next) {
my_callback(req, res, next).catch((e) => {
next(e);
});
});
let my_callback = async function (req, res, next) {
const posts = await Post.find({});
res.render("index", { title: "Homepage", posts });
};

Answer 1

Here you are calling .catch on a Promise returned by calling my_callback function
router.get("/", async function (req, res, next) {
my_callback(req, res, next).catch((e) => {
next(e);
});
});
Here you are trying to access .catch on a function definition which is syntactically wrong in JavaScript
router.get(
"/",
async function (req, res, next) {
const posts = await Post.find({});
res.render("index", { title: "Homepage", posts });
}.catch((e) => next(e))
);
If you want to include catch with the function definition then you can use try...catch
More reading about promises - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise