[ArkTS]url中含有中文导致http请求失败

一,前言  

        这个问题是我在使用和风天气API查询城市信息时发现的问题:

https://geoapi.qweather.com/v2/city/lookup?{查询参数}

        当我在Search组件获焦后使用输入法对其中location字段置为中文时, 搜索不到城市,工程日志显示状态码为400;

        但同样的url,我在浏览器上则可以正常获取到数据。

        令我百思不得其解

二,问题所在

        因为浏览器http请求无法直接识别中文,所以当请求中含有中文时,浏览器会自动将其转为UTF-8格式的三个16进制数,倘若我们从浏览器直接粘贴到工程便可以发现。

粘贴前:https://geoapi.qweather.com/v2/city/lookup?location=上海&range=cn

粘贴后:

https://geoapi.qweather.com/v2/city/lookup?location=%E4%B8%8A%E6%B5%B7&range=cn

        而工程创建中编译器则不会为我们自动转化,这也就解释了为什么在浏览器中可行,工程中却不可行的原因 。

三,解决方法

        对于可能含有中文的字段,我们需要对其进行一些特殊“关照”,通过encodeURIComponent()函数重新编码这些字符,再将其与原url拼接即可。

let cityname = encodeURIComponent(name)
let url = `https://geoapi.qweather.com/v2/city/lookup?location=${cityname}`

        此时便可在工程中正常使用该api接口。

        至此便大功告成。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值