What function is passed to cb here?

Question

So I have a small project containing both frontend (html) and backend (express: server, routers) parts. The project isn't that clean, so the its main operationality is launched directly in html section. And not much is clear to me here, especially what function is passed to cb (callback) here?

I have the following code in part of my html page within js project:

            const $ = document.getElementById.bind(document)

            const request = (path, cb) =>
                fetch(path)
                    .then((res) => {
                        if (res.ok) return res.json()
                        throw Error('HTTP error: ' + res.status)
                    })
                    .then(cb)
                    .catch((err) => ($('result').innerHTML = err))

            const main = async () => {
                const pinRequired = new URLSearchParams(document.location.search).get('pin')
                const id = await request(`./qrcode?pin=${pinRequired}`, (json) => {
                    const { qrbase64, deeplink, pin, id } = json
                    $('qrcode').innerHTML = `<img src="${qrbase64}" alt="Red dot" />`
                    $('deeplink').innerHTML = `<a href=${deeplink} target="_blank"> ${deeplink.slice(0, 90)}...</a>`
                    $('pin').innerHTML = pin ? pin : 'Not requested'
                    return id
                })

                setInterval(() => request(`./status?id=${id}`, ({ status }) => ($('result').innerHTML = status)), 1000)
            }

            main().catch(console.log)

Is this (json)? I also don't know why it is in () round brackets, however, it is an object, it cannot be passed as a callback, right?

And I also have a code in another file, which contains /qrcode route of my website. There is a function (quite big, so i'm not posting it, just pointing that it doesn't return function that may be passed as a callback).

If this callback 100% is in another part of the code, as you think, please let me know.

Look up what an `arrow` function is in Javascript. That's what `(json) => { ... }` is. Also, the `await` in front of your call to `request()` isn't doing anything useful. You should either be using a callback design OR a promise design, not both mixed together. In general, the future of the language is a promise-design so that's where you should be headed using only promises for control flow, not plain callbacks. — jfriend00, Nov 14 '21 at 17:53

jfriend00 · Answer 1 · 2021-11-15T01:13:04.350

If what you're asking about is this callback (json) => { ... } in the code below:

               request(`./qrcode?pin=${pinRequired}`, (json) => {
                    const { qrbase64, deeplink, pin, id } = json
                    $('qrcode').innerHTML = `<img src="${qrbase64}" alt="Red dot" />`
                    $('deeplink').innerHTML = `<a href=${deeplink} target="_blank"> ${deeplink.slice(0, 90)}...</a>`
                    $('pin').innerHTML = pin ? pin : 'Not requested'
                    return id
                });

Then this is what is known as an arrow function. You can read about them here on MDN. They are a shortcut syntax for declaring a function that also has a number of implementation differences.

Note, there are some other issues in your code as request() does not return a promise so it does no good to use await on it and you won't get the id back from return id either.

Also note that the request library has been deprecated and generally shouldn't be used for new code. There is a list of alternatives here, all of which support promises natively. My favorite in that list is the got() library.

What function is passed to cb here?

1 Answers1