Async request we can use when we want to do some action behind the scenes, when we dont want to reload page. Usually we are doing for example post request for deleting product - we have form with some submit button, which will redirect it to post request where product will be deleted and page will be reloaded. Here we will use async request, deleting product will happen asynchronously and page will not be reloaded, we will remove element directly from DOM.



views/admin/products.js

...
<article>
    ...
    <!-- product html -->
    ...
    <div class="actions">
        <input type="hidden" value="<%= product._id %>" name="productId" />
        <input type="hidden" value="<%= csrfToken %>" name="_csrf" />
        <button class="btn" type="button" onclick="deleteProduct(this)">Delete</button>
    </div>
</article>
...



public/js/admin.js

const deleteProduct = (btn) => {
    const prodId = btn.parentNode.querySelector('[name=productId]').value;
    const csrf = btn.parentNode.querySelector('[name=_csrf]').value;
    const productElement = btn.closest('article')

    fetch('/admin/product' + prodId, {
        method: 'DELETE',
        headers: {
            'csrf-token': csrf
        }
    })
    .then(result => {
        return result.json();
    })
    .then(data => {
        productElement.parentNode.removeChild(productElement);
    })
    .catch(err => {
        console.log(err);
    });
}



routes/admin.js

const path = require('path');
const express = require('express');
const router = express.Router();
const productsController = require('../controllers/shop');
const isAuth = require('../middleware/is-auth');

router.delete('/product/:productId', isAuth, productsController.deleteProduct)
module.exports = router;



controllers/shop.js

...
const Product = require('../models/product');

exports.deleteProduct = (req ,res, next) => {
    const prodId = req.params.productId;
    Product.findById(prodId)
    .then(product => {
        if (!product) {
            return next(new Error('Product not found'));
        }
        return Product.deleteOne({_id: prodId, userId: req.user._id});
    })
    .then(() => {
        res.status(200).json({ message: 'Success !'});
    })
    .catch(err => {
        res.status(500).json({ message: 'Deleting product failed !'});
    })
}
...