JSON 加载了缺少的键/值对

Question

我正在使用 Axios 从 React 应用服务器加载静态 JSON，在读取文件时，缺少许多键/值对。

有问题的JSON文件是asset-manifest.json，它包含了app中所有的assets（media、css、js）文件，由webpack在构建过程中生成。我使用这个文件作为参考来为网站预加载图像。

JSON 文件如下所示（省略号由我添加，ofc）：

{
  "files": {
    "main.js": "/static/js/main.04cbf801.chunk.js",
    "main.js.map": "/static/js/main.04cbf801.chunk.js.map",
    "runtime-main.js": "/static/js/runtime-main.ed6fc4d3.js",
    "runtime-main.js.map": "/static/js/runtime-main.ed6fc4d3.js.map",
    "static/css/2.f5a05697.chunk.css": "/static/css/2.f5a05697.chunk.css",
    "static/js/2.448c4959.chunk.js": "/static/js/2.448c4959.chunk.js",
    "static/js/2.448c4959.chunk.js.map": "/static/js/2.448c4959.chunk.js.map",
    "static/css/3.d7d661be.chunk.css": "/static/css/3.d7d661be.chunk.css",
    "static/js/3.1605bce2.chunk.js": "/static/js/3.1605bce2.chunk.js",
    "static/js/3.1605bce2.chunk.js.map": "/static/js/3.1605bce2.chunk.js.map",
    "index.html": "/index.html",
    "precache-manifest.093a3239b1d438e30c3887d109b2e7b2.js": "/precache-manifest.093a3239b1d438e30c3887d109b2e7b2.js",
    "service-worker.js": "/service-worker.js",
    "static/css/2.f5a05697.chunk.css.map": "/static/css/2.f5a05697.chunk.css.map",
    "static/css/3.d7d661be.chunk.css.map": "/static/css/3.d7d661be.chunk.css.map",
    "static/media/ANKLES.6d795be0.svg": "/static/media/ANKLES.6d795be0.svg",
    "static/media/ARMS.8418bd6e.svg": "/static/media/ARMS.8418bd6e.svg",
    (...)
  },
  (...)
}

在缺少的键/值对中并没有什么特别之处。总共有 400 多个条目中缺少大约 15 个条目。例如，这些是缺少的一些键/值对：

"static/media/testa.png": "/static/media/testa.0b92a7e4.png",
"static/media/Osso01.png": "/static/media/Osso01.9949a55e.png",
"static/media/CabeloHomem01.png": "/static/media/CabeloHomem01.258b6c19.png"

这是我用来加载 JSON 的代码：

axios.get("asset-manifest.json")
  .then(manifest => {
    // entries in manifest are already missing at this point
    // do stuff with manifest
  })

我尝试使用 fetch 而不是 Axios，结果相同。

顺便说一句，如果我复制 JSON 代码并在控制台/终端中解析它，所有条目都会按预期解析。

作为一种解决方法，我可以使用 base 64 将相关图像嵌入到代码中，但这是我宁愿避免的最后手段。

有什么想法吗？

感谢阅读。

Answer 1

与fetch 合作良好，首先检查您在邮递员或您喜欢的任何其他方面的回复

let payload = {
  token: 'p1ztA-3ZEYrX2wJAa_juSg',
  data: {
    'static/media/testa.png': '/static/media/testa.0b92a7e4.png',
    'static/media/Osso01.png': '/static/media/Osso01.9949a55e.png',
    'static/media/CabeloHomem01.png':
      '/static/media/CabeloHomem01.258b6c19.png',
    'main.js': '/static/js/main.04cbf801.chunk.js',
    'main.js.map': '/static/js/main.04cbf801.chunk.js.map',
    'runtime-main.js': '/static/js/runtime-main.ed6fc4d3.js',
    'runtime-main.js.map': '/static/js/runtime-main.ed6fc4d3.js.map',
    'static/css/2.f5a05697.chunk.css': '/static/css/2.f5a05697.chunk.css',
    'static/js/2.448c4959.chunk.js': '/static/js/2.448c4959.chunk.js',
    'static/js/2.448c4959.chunk.js.map': '/static/js/2.448c4959.chunk.js.map',
    'static/css/3.d7d661be.chunk.css': '/static/css/3.d7d661be.chunk.css',
    'static/js/3.1605bce2.chunk.js': '/static/js/3.1605bce2.chunk.js',
    'static/js/3.1605bce2.chunk.js.map': '/static/js/3.1605bce2.chunk.js.map',
    'index.html': '/index.html',
    'precache-manifest.093a3239b1d438e30c3887d109b2e7b2.js':
      '/precache-manifest.093a3239b1d438e30c3887d109b2e7b2.js',
    'service-worker.js': '/service-worker.js',
    'static/css/2.f5a05697.chunk.css.map':
      '/static/css/2.f5a05697.chunk.css.map',
    'static/css/3.d7d661be.chunk.css.map':
      '/static/css/3.d7d661be.chunk.css.map',
    'static/media/ANKLES.6d795be0.svg': '/static/media/ANKLES.6d795be0.svg',
    'static/media/ARMS.8418bd6e.svg': '/static/media/ARMS.8418bd6e.svg',
  },
};

fetch('https://app.fakejson.com/q', {
  method: 'POST',
  body: JSON.stringify(payload),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then(response => response.json())
  .then(json => console.log(json));