Hapi 中由 QueryString 传递的 JSON 被解析成 undefined 的解决方案
在 Hapi 中,我们可以通过 QueryString 来向后端传递 JSON 数据。但是,有时候我们会发现,通过 QueryString 传递的 JSON 数据在后端解析的时候会被解析成 undefined。这是为什么呢?怎么解决这个问题呢?本文将深入探讨这个问题,并提供解决方案。
为什么会出现这个问题?
首先,我们需要了解在 Hapi 中,使用 QueryString 在传递 JSON 数据时,需要对 JSON 数据进行 URL 编码。URL 编码的作用是将非 ASCII 字符转换为 ASCII 字符,以便于在 URL 中使用。比如说,我们向后端传递以下 JSON 数据:
{ "name": "Hapi", "language": "JavaScript" }
我们需要将它进行 URL 编码,得到以下结果:
name=Hapi&language=JavaScript
这个过程可以通过 querystring 模块中的 stringify()
方法来实现。所以,我们可以这样来编写前端代码:
const data = { name: 'Hapi', language: 'JavaScript' }; const querystring = require('querystring'); const params = querystring.stringify(data); window.location.href = `/api?${params}`;
当后端接收到这个请求时,它需要对 QueryString 进行解析。在 Hapi 中,可以使用 core.encoders.url.decodeQuery()
方法来进行解析。这个方法会将 QueryString 解析成一个对象,比如:
{ name: 'Hapi', language: 'JavaScript' }
然而,如果我们向后端传递的 JSON 数据中存在 null
、undefined
、NaN
等无法编码为字符串的值,例如:
{ "name": "Hapi", "language": "JavaScript", "version": undefined }
就会在解析时出现问题,导致整个 JSON 数据被解析成 undefined。
解决方案
为了解决这个问题,我们需要避免向后端传递无法编码为字符串的值。在上面的例子中,我们可以将 undefined 删除掉,然后再对 JSON 数据进行 URL 编码,这样就可以避免出现解析错误的问题。
此外,我们还可以通过 JSON.stringify()
方法将 JSON 数据序列化成字符串,然后再进行 URL 编码。这样虽然会增加一些开销,但可以更加准确地进行传递。
具体来讲,我们可以这样编写前端代码:
const data = { name: 'Hapi', language: 'JavaScript', version: undefined }; const querystring = require('querystring'); const params = querystring.stringify(JSON.parse(JSON.stringify(data)).replace(undefined, '')); window.location.href = `/api?${params}`;
在这个例子中,我们先使用 JSON.stringify()
将 JSON 数据序列化成字符串,然后再使用 JSON.parse()
将字符串转换成对象。最后,我们使用 replace()
方法将 undefined 删除掉,然后再进行 URL 编码。
在后端代码中,我们还需要对解析到的值进行判断,以避免再次出现 undefined 的情况。可以参考以下代码:
-- -------------------- ---- ------- ----- ---- - ---------------------- ----- ----------- - ----------------------- ----- ---- - ----- -- -- - ----- ------ - ------------- ----- ----- ----- ----------- --- -------------- ------- ------ ----- ------- -------- --------- -- -- - ----- ----- - ------------- -- --- ----- ---- - ------------------------- -- -------------------------------- - -- ------------- --- ------------ - ------ ------------- - - ------ ----- - --- ----- --------------- ------------------- ------- -- ---- ----------------- -- -------
在这个例子中,我们通过 hasOwnProperty()
方法来判断是否存在 version 属性,并且是否等于字符串 'undefined'。如果等于,就需要将 version 属性删除掉。这样我们就可以避免出现 undefined 的情况了。
总结
在 Hapi 中,通过 QueryString 向后端传递 JSON 数据时,容易出现解析错误的情况。解决这个问题的方法是避免向后端传递无法编码为字符串的值,可以通过删除 undefined、序列化为字符串等方式来进行处理。在后端代码中,我们也需要对解析到的值进行判断,以避免再次出现 undefined 的情况。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64ccb5345ad90b6d042ae649