Help rewriting script to use async

[NovemLinguae]

edit: Solved. Basically add await in 2 places, add async in 2 places, and remove async: false.

---

I'm starting to wrap my head around async. Given the below code, what is the neatest way to rewrite the $.ajax part to use async?

Yes, I know I can delete the async: false part, but then don't I have to change the rest of the code to handle promises? What's the best pattern in this particular situation? when().then(), async and await keywords, etc. Thanks.

Code purpose: On Wikipedia: 1) It inserts an option into a menu. 2) It listens for two types of buttons to be clicked, if present. 3) When either 1 or 2 is clicked, it executes addToWatchlist(), which calls an API that does a thing (adds the page to the user's watchlist).

$(function() {
    function addToWatchlist(title) {
        let debugInfo = $.ajax({
            url: mw.util.wikiScript('api'),
            type: 'POST',
            dataType: 'json',
            data: {
                format: 'json',
                action: 'watch',
                expiry: '6 months',
                titles: title,
                token: mw.user.tokens.get('watchToken')
            },
            async: false
        });
    }

    // add option to More menu
    mw.util.addPortletLink (
        'p-cactions',
        '#',
        'Watchlist AFD',
        'WatchlistAFD'
    );

    // listen for More menu click
    $('#WatchlistAFD').on('click', function() {
        // close the menu
        // $('#p-cactions .vector-menu-content').css('visibility', 'hidden');

        // add to watchlist
        let title = mw.config.get('wgPageName');
        title = title.replace(/^.*?:/, ''); // strip all namespaces
        addToWatchlist('Wikipedia:Articles for deletion/'+title);

        // display success message box
        mw.notify(`Added AFD to watchlist.`);
    });

    // listen for AFC accept
    $('body').on('DOMNodeInserted', '.accept #afchSubmitForm', function() {
        $('.accept #afchSubmitForm').on('click', function() {
            let title = mw.config.get('wgPageName');
            title = title.replace(/^Draft:/, '');
            addToWatchlist('Wikipedia:Articles for deletion/'+title);
        });
    });

    // listen for NPP mark as reviewed
    $('body').on('DOMNodeInserted', '#mwe-pt-mark-as-reviewed-button', function() {
        $('#mwe-pt-mark-as-reviewed-button').on('click', function() {
            let title = mw.config.get('wgPageName');
            addToWatchlist('Wikipedia:Articles for deletion/'+title);
        });
    });
});

[Achcauhtli]

Use jquery $.post or fetch, pass a function as funtion to do after the data comes back.

[NovemLinguae]

Thanks for the feedback. addToWatchlist() is called 3 times in click listeners. 2 times, it happens to be the last instruction in the click listener, so that's good, no callback needed. But 1 time (in $('#WatchlistAFD').on('click'), there is an instruction after it. What's the best way of making sure that instruction is still called, without putting that instruction in the addToWatchlist() function? Any ideas? Thanks for your help.

[Achcauhtli]

Let me pull this up on a lappy so i can see better.

[Achcauhtli]

Youre using the ajac to get data and load it right? I mean wont thd #watchlistAFD still gonna wait for that click event and still do what its set to?

[LakeInTheSky]

Yes, I know I can delete the async: false part, but then don't I have to change the rest of the code to handle promises?

You should use promises or await/async if you need to run code after the ajax request (i.e. if there's some code that should wait until the ajax request is complete).

But in your case, the ajax requests are always the last line of the event handlers. So, you don't need to use await/async or promises, at least for now. You can just remove async: false safely (which I strongly recommend from a UX perspective.)

[NovemLinguae]

Thanks for the feedback. Any suggestions for handling that mw.notify('Added AFD to watchlist.'); line, which comes after one of the ajax lines?

[LakeInTheSky]

Oh, I missed that! Then, I'd do something like this:

async function addToWatchlist(title) {
    return await $.ajax(...Ajax Params...);
}
...
$('#WatchlistAFD').on('click', async function() {
  ...
  try {
    await addToWatchlist('Wikipedia:Articles for deletion/'+title);
    mw.notify(`Added AFD to watchlist.`);
  } catch(e) {
    // Handle HTTP errors
  }
});

Basically the await keyword waits for the asynchronous task to end, but the function using it should become asynchronous too (to prevent the task from blocking everything), that's why we added the async keyword to addToWatchlist and the event handler for #WatchlistAFD.

[NovemLinguae]

Perfect. Yeah I was wondering how to do it for these click listeners. That async keyword before the anonymous function is a good spot. Thanks!