微信小程序上线后请求接口总是失败？

一、问题

本地小程序开发工具测试请求接口都很正常，使用预览和真机调试功能在手机上运行请求接口总是失败。

小程序上线后，部分手机请求接口正常，部分手机请求接口失败，将请求接口复制到谷歌浏览器中查询总是成功的。

二、原因分析

restful 接口定义为：https://ip:port/bus/:router_name，其中 router_name 是个变量。实际请求接口为：https://ip:port/bus/993路，可以看到：请求地址中的变量router_name 被 993路 给替换了。问题就出在这里，请求地址中含有中文。

在 小程序开发工具、谷歌浏览器 和 部分请求成功的手机 上最终发出的请求都会对请求地址中的中文汉字进行编码，如下：

对请求地址中的中文进行编码

在 开发工具中预览功能、开发工具中真机调试功能 和 部分请求不成功的手机 上最终发出的请求并不会对中文进行编码，如下：

image.png

三、解决方法

上面分析了请求接口失败是因为部分手机没有对请求地址中的中文进行编码，解决方法为利用 js 自带的 api encodeURIComponent() 处理。

encodeURIComponent('路')
"%E8%B7%AF"

有一点需要注意：不能对整个请求地址进行编码，那么的话会对所有除字母、数字以外的符号进行编码，会变成下面这样，实际请求中仍然会报错。

encodeURIComponent('https://xxxxx/bus/993路?direction=1')
"https%3A%2F%2Fxxxxx%2Fbus%2F993%E8%B7%AF%3Fdirection%3D1"

在处理 restful 接口过程中，有一步用具体指（如：991路）替换请求地址中的变量（如：https://ip:port/bus/:router_name 中的:router_name），此时先对 991路 进行编码再替换变量值即可。