React中使用Fetch发DELETE请求URL特殊字符被自动编码如何解决？

问题原因 #

浏览器发起请求时会自动对URL路径中的保留字符{、}做URL编码：{会被编码为%7B、}会被编码为%7D，因此路径中原有的%{[@timestamp]}片段会被转义为%%7B[@timestamp]%7D，和预期路径格式不符。
之前使用decodeURI无效的核心原因是：原生fetch接收到字符串类型的URL参数时，会自动做一次URL编码处理，提前用decodeURI处理原始路径完全不会生效。

修复方案 #

先通过URL对象拿到编码后的完整地址，手动替换转义片段后再发起请求即可，代码示例：

const rawPath = '/api/apiname/name-%{[@timestamp]}-1970.01.01';
// 基于当前域名构造临时URL对象，得到默认编码后的完整地址
const tempUrl = new URL(rawPath, window.location.origin);
// 替换转义片段为需要的格式
const finalUrl = tempUrl.href.replaceAll('%%7B', '%{').replaceAll('%7D', '}');

fetch(finalUrl, {
    method: 'delete',
    headers: {
        'Content-Type': 'application/json;charset=utf-8',
        Authorization: `Bearer ${Token}`
    }
})

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