什么函数在这里传递给 cb ？

Posted 2023-03-07

【中文标题】什么函数在这里传递给 cb ？

【英文标题】：What function is passed to cb here?

【发布时间】：2021-12-26 03:03:51

【问题描述】：

所以我有一个包含前端（html）和后端（快递：服务器，路由器）部分的小项目。这个项目不是那么干净，所以它的主要操作是直接在 html 部分启动的。在这里我不清楚，尤其是 什么函数被传递给 cb（回调）？

我在 js 项目中的部分 html 页面中有以下代码：

            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"  />`
                    $('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)

这是（json）吗？我也不知道为什么它在（）圆括号中，但是，它是一个对象，不能作为回调传递，对吧？

我在另一个文件中也有一个代码，其中包含我网站的 /qrcode 路由。有一个函数（很大，所以我就不贴了，只是指出它不返回可能作为回调传递的函数）。

如果此回调 100% 在代码的另一部分中，如您所想，请告诉我。

【问题讨论】：

查看 javascript 中的 arrow 函数是什么。这就是(json) => ... 。此外，在您致电request() 之前的await 并没有做任何有用的事情。您应该使用回调设计或承诺设计，而不是两者混合在一起。一般来说，该语言的未来是一种承诺设计，因此您应该只使用控制流的承诺，而不是简单的回调。

【参考方案1】：

如果你问的是下面代码中的这个回调(json) => ... ：

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

这就是所谓的箭头函数。您可以在 MDN 上阅读有关它们的信息 here。它们是一种快捷语法，用于声明一个也有许多实现差异的函数。

注意，您的代码中还有一些其他问题，因为 request() 没有返回承诺，因此在其上使用 await 并没有好处，您也不会从 return id 得到 id .

另请注意，请求库已被弃用，通常不应用于新代码。有一个替代列表here，所有这些都支持原生承诺。该列表中我最喜欢的是got() library。