React中fetch请求URL通过模板字符串插入变量失效问题

你写死$apple路径可以正常请求，是因为目标接口本身就存在/e1/e11/$apple这个静态路由，这里的$apple就是路径里的固定文本，和JS变量插值没有任何关系。
你用${variable1}拼接路径出问题，基本逃不出以下几个常见原因：

• 变量未定义或值为空：variable1在fetch执行的作用域内未声明、值为undefined/null/空字符串时，拼接后的路径会变成https://example/e1/e11/undefined?xxx这类不符合后端路由规则的地址，直接返回404
• 变量含未转义特殊字符：如果variable1里包含/、?、#、空格、中文等URL特殊保留字符，直接拼接会破坏URL结构。比如变量值为test/123会让路径多拆一级，值带?会截断后面的查询参数，最终和后端路由匹配失败
• 语法书写错误：如果包裹URL的不是反引号`而是普通单/双引号，${variable1}不会被解析为变量插值，会被当成普通文本直接拼到URL里，最终路径里会出现字面量${variable1}，自然无法请求成功
• 变量类型错误：如果variable1是对象、数组等非原始类型，插值时会自动调用toString()转成[object Object]这类无意义字符串，完全不符合路径参数要求

路径参数拼接前必须用encodeURIComponent()做转义处理，不要直接把原始变量插到URL字符串里，避免出现非法字符、路径结构被破坏的问题。

内容的提问来源于stack exchange，提问作者Tangodo