一,前言
这个问题是我在使用和风天气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接口。
至此便大功告成。