如何从Axios POST请求返回18个字符的字符串响应

Question

我试图发出一个POST（添加）请求，返回添加项的ID。ID是一个18个字符的字符串。只要字符串不超过16个字符，一切都正常。当长度为18个字符时，最后两个字符总是损坏的，因为它们默认为零。

我使用Vuejs作为前端，使用SpringBoot作为后端。我知道javascript在很长一段时间内限制了53位的精度，这就是为什么我使用字符串作为这个ID的类型。如果我试图返回一个18位的数字，而不是一个18个字符的字符串，我希望会发生这种情况。虽然我返回了一个类型字符串，但Axios会自动将其转换为LONG，从而导致其损坏。我如何告诉Axios不要这样做？#标题##谢谢。

==========后端restcontrollerendpoint=============

@PostMapping("/persons")
public ResponseEntity<String> addPerson(@Valid @RequestBody Person person) {
    String newPersonId = personService.addPerson(person);
    return new ResponseEntity<>(newPersonId, HttpStatus.OK);
}

===================前端Axios POST呼叫===================

axios
    .post("http://localhost:xxxx/persons", newPerson)
    .then(response => {
      console.log("Response from post is: " + response.data);
      console.log(response);
      newPerson.id = response.data;
    })
    .catch(error => console.log(error));

=============控制台输出：=============

下面一行是控制台。从我的前端Post通话记录打印声明。这表明我收到了ID，最后两个数字为零。

回复是：622056030329638900

注意这个反应。数据（以下第3行）以900结尾，没有引号。如果你往下读，回答。要求答复（第10行）

1. {data：622056030329638900，state： 200，statusText：""，标头：{...}，配置：{...}，...}
2. 配置：{url："http://localhost： xxxx/人"，方法："post"，数据："{"firstName"："daffy"，"middleName"："woddle"，"lastName"："Duck"，"home Email"："[e-mail]"}"，头：{...}，变换请求：数组（1），...}
3. 数据：622056030329638900
4. 标头：{content ent-long："18"， content ent-type："Application/json； charset=UTF-8"}
5. 请求：XMLHttpRequest
6. onabort（）
7. onError（）
8. onload： null
9. onloadend： null
10. onloadstart： null
11. null
12. onreadystatechange： HandleLoad（）
13. ontimeout： handleTimeout（）
14. 准备状态：4
15. 回应：622056030329638912
16. 回应文本：622056030329638912
17. 响应类型："
18. 回应URL："http://localhost： xxxx/人"
19. 响应XML： null
20. 状态：200
21. 状态文本："
22. 超时：0

预期结果：发送的所有18个字符与接收的字符匹配。实际结果：前16个字符匹配，后两个为零。

Answer 1

尝试在后端使用object返回：

{value: "622056030329638900"}

这对我有用！

Answer 2

这个数字（6220560329638912）对于JavaScript来说太大了。看看Number。最大安全整数，值为9007199254740991。任何大于“最大安全整数”的值都不能在浏览器中用作数字。

如果可以的话，把它当作一根绳子。如果必须使用response，请让API返回字符串值。数据。否则，使用responseText就可以了。

MAX_SAFE_INTEGER常量的值为9007199254740991 (9,007,199,254,740,991或~9000万亿）。这个数字背后的原因是JavaScript使用IEEE 754中规定的双精度浮点格式数字，并且只能安全地表示-(2^53 - 1)和2^53-1之间的数字。

这里的安全指的是精确表示整数并正确比较它们的能力。例如，Number.MAX_SAFE_INTEGER1===Number.MAX_SAFE_INTEGER2将计算为true，这在数学上是不正确的。有关详细信息，请参见Number.isSafeintger（）。

下面是一个演示：

js prettyprint-override">console.log(Number.MAX_SAFE_INTEGER);
console.log(622056030329638922);

Answer 3

问题最终归结为这样一个事实，即像“12334”这样的字符串不是有效的JSON字符串（而是有效的JSON数字）。参见这个问题

<script>
    // 1233
    alert(JSON.parse("1234")); // treated as a number

    // SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    alert(JSON.parse("ABC"));
</script>

Axios默认情况下以这种方式转换响应（它解析json）：

  transformResponse: [function transformResponse(data) {
    /*eslint no-param-reassign:0*/
    if (typeof data === 'string') {
      try {
        data = JSON.parse(data);
      } catch (e) { /* Ignore */ }
    }
    return data;
  }],

因此，如果你有以下选择：

第一：返回一个有效的Json字符串，如下所示：\"622056030329638912\"（服务器端的JSON ENCODE）

    alert(JSON.parse("\"622056030329638912\""));

二：禁用axios上的转换：

    axios
        .post("http://localhost:xxxx/persons", newPerson, {
            transformResponse: function(response) {
                // do not transform response at all... 
                return response;
            }
         })
        .then(response => {
            console.log("Response from post is: " + response.data);
            console.log(response);
            newPerson.id = response.data;
        })
        .catch(error => console.log(error));