问题

When I use encodeURIComponent like this:

export function getDownloadFileUrl(fid: string, bgColor: string) {
    const params = encodeURIComponent("id=" + Number(fid) + "&bgColor=" + bgColor);
    const config = {
        method: 'get',
        url: '/snap/photo/download?' + params,
    };
    const actionTypeString: string = FileActionType[FileActionType.DOWNLOAD_FILE];
    return requestWithActionType(config, actionTypeString, store);
}

The server side shows that it could not receive the "id" parameter (the "id" parameter is missing). Am I missing something? I read the document and it said that encodeURIComponent is used to encode parameters. What should I do to fix it? Does encodeURIComponent only encode the value?

你使用 encodeURIComponent 如下所示：

export function getDownloadFileUrl(fid: string, bgColor: string) {
    const params = encodeURIComponent("id=" + Number(fid) + "&bgColor=" + bgColor);
    const config = {
        method: 'get',
        url: '/snap/photo/download?' + params,
    };
    const actionTypeString: string = FileActionType[FileActionType.DOWNLOAD_FILE];
    return requestWithActionType(config, actionTypeString, store);
}

服务器端显示无法接收到 "id" 参数（"id" 参数丢失）。我是否漏掉了什么？我阅读了文档，它说 encodeURIComponent 用于编码参数。我应该怎么做才能修复这个问题？encodeURIComponent 只编码值吗？

export function getDownloadFileUrl(fid: string,bgColor: string) {
    const params = encodeURIComponent("id=" + Number(fid) + "&bgColor=" + bgColor);
    const config = {
        method: 'get',
        url: '/snap/photo/download?' + params,
    };
    const actionTypeString: string = FileActionType[FileActionType.DOWNLOAD_FILE];
    return requestWithActionType(config, actionTypeString, store);
}

答案1

得分: 1

It's called encodeURIComponent not encodeEntireQueryStringInOneGo.

它叫做 encodeURIComponent 而不是 encodeEntireQueryStringInOneGo。

It converts characters with special meaning to encoded versions. This lets you use those characters as data instead of as having their special meaning. If you convert all the = (which links a name to its value) and the & (which mark the end of one name=value pair and the start of the next one) then you break the data format.

它将具有特殊含义的字符转换为编码版本。这使您可以将这些字符用作数据，而不是具有它们的特殊含义。如果您转换所有的 =（它将名称与其值关联起来）和 &（它标志着一个名称=值对的结束和下一个名称=值对的开始），那么您会破坏数据格式。

const params = "id=" + encodeURIComponent(Number(fid)) + "&bgColor=" + encodeURIComponent(bgColor);

const params = "id=" + encodeURIComponent(Number(fid)) + "&bgColor=" + encodeURIComponent(bgColor);

That said, we now have URLSearchParams which will generate the whole query string for you (i.e. insert = and & and escape as needed).

话虽如此，我们现在有了URLSearchParams，它会为您生成整个查询字符串（即插入=和&并根据需要进行转义）。

const params = new URLSearchParams({
id: Number(fid),
bgColor
});

const params = new URLSearchParams({
id: Number(fid),
bgColor
});

const params = "id=" + encodeURIComponent(Number(fid)) + "&bgColor=" + encodeURIComponent(bgColor);

const params = new URLSearchParams({
    id: Number(fid),
    bgColor
});