后端返回JSON编码后的数据,在前端axios接受之后,就是转为了JavaScript对应的对象是吗?

使用Express作为后端程序,
通过JSON编码后返回数据:

const data = JSON.stringify(originData)
res.send(`${data}`);

前端在接受到之后:

  useEffect(() => {
    
    console.log(111)
    axios.get('http://localhost:3000/blocks/1').then((res) => {
      console.log(JSON.stringify(res.data.results))  // 这里有数据
      
      const blocksRes = res.data.results

      console.log(typeof blocksRes)  // 打印的是:object
      setBlocks(res.data.results)
    })

  }, [])

这里有一个疑问,

1、后端返回JSON编码后的数据,在前端axios接受之后,就是转为了JavaScript对应的对象是吗?
2、这里打印的是一个数组样式的数据:

 console.log(JSON.stringify(res.data.results))   

结果:

[{"object":"block","id":"17ddeaa8-cb4b-803e-9807-e9197656cee6","parent":{"type":"page_id","page_id":"17ddeaa8-cb4b-8092-9a2c-c1617a013cdd"},"created_time":"2025-01-16T10:35:00.000Z","last_edited_time":"2025-02-07T07:06:00.000Z","createdUser":{"object":"user","id":"4dbd-acb7-6d3fd574055822"},"last_edited_by":{"object":"user","id":"4dbd-acb7-6d3fd574055822"},"has_children":false,"archived":false,"Rrash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"11","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"11","href":null}],"color":"default"}},{"object":"block","id":"193deaa8-cb4b-807c-907d-c36955a9904f","parent":{"type":"page_id","page_id":"17ddeaa8-cb4b-8092-9a2c-c1617a013cdd"},"created_time":"2025-02-07T07:06:00.000Z","last_edited_time":"2025-02-07T08:54:00.000Z","createdUser":{"object":"user","id":"4dbd-acb7-6d3fd574055822"},"last_edited_by":{"object":"user","id":"4dbd-acb7-6d3fd574055822"},"has_children":false,"archived":false,"Rrash":false,"type":"paragraph","paragraph":{"rich_text":[{"type":"text","text":{"content":"22","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"22","href":null}],"color":"default"}},{"object":"block","id":"193deaa8-cb4b-8019-9543-f2a38aa45c23","parent":{"type":"page_id","page_id":"17ddeaa8-cb4b-8092-9a2c-c1617a013cdd"},"created_time":"2025-02-07T08:54:00.000Z","last_edited_time":"2025-02-07T08:54:00.000Z","createdUser":{"object":"user","id":"4dbd-acb7-6d3fd574055822"},"last_edited_by":{"object":"user","id":"4dbd-acb7-6d3fd574055822"},"has_children":false,"archived":false,"Rrash":false,"type":"paragraph","paragraph":{"rich_text":[],"color":"default"}},{"object":"block","id":"193deaa8-cb4b-80ee-833b-c63b0abe9395","parent":{"type":"page_id","page_id":"17ddeaa8-cb4b-8092-9a2c-c1617a013cdd"},"created_time":"2025-02-07T08:54:00.000Z","last_edited_time":"2025-02-07T08:55:00.000Z","createdUser":{"object":"user","id":"4dbd-acb7-6d3fd574055822"},"last_edited_by":{"object":"user","id":"4dbd-acb7-6d3fd574055822"},"has_children":false,"archived":false,"Rrash":false,"type":"code","code":{"caption":[],"rich_text":[{"type":"text","text":{"content":"{\n  aaa: 111,\n  bbb: 222,\n}","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"{\n  aaa: 111,\n  bbb: 222,\n}","href":null}],"language":"json"}},{"object":"block","id":"193deaa8-cb4b-8040-8014-ccf112c8b971","parent":{"type":"page_id","page_id":"17ddeaa8-cb4b-8092-9a2c-c1617a013cdd"},"created_time":"2025-02-07T08:55:00.000Z","last_edited_time":"2025-02-07T08:55:00.000Z","createdUser":{"object":"user","id":"4dbd-acb7-6d3fd574055822"},"last_edited_by":{"object":"user","id":"4dbd-acb7-6d3fd574055822"},"has_children":false,"archived":false,"Rrash":false,"type":"paragraph","paragraph":{"rich_text":[],"color":"default"}},{"object":"block","id":"193deaa8-cb4b-80d2-91d6-d950d3d73dc2","parent":{"type":"page_id","page_id":"17ddeaa8-cb4b-8092-9a2c-c1617a013cdd"},"created_time":"2025-02-07T08:55:00.000Z","last_edited_time":"2025-02-07T08:55:00.000Z","createdUser":{"object":"user","id":"4dbd-acb7-6d3fd574055822"},"last_edited_by":{"object":"user","id":"4dbd-acb7-6d3fd574055822"},"has_children":false,"archived":false,"Rrash":false,"type":"paragraph","paragraph":{"rich_text":[],"color":"default"}}]

这里看出是一个数组,为何:这里打印是object呢?

console.log(typeof blocksRes)  // 打印的是:object
阅读 872
2 个回答

对于问题二,JavaScript的typeof 数组返回的就是object,可以用Array.isArray或者instanceof判断数组。

typeof []
// 'object'
[] instanceof Array
// true
Array.isArray([])
// true

image.png

Axios 会根据响应的 Content-Type 头部,自动解析 JSON 数据并将其转换为 JavaScript 对象.
如果你不想让 Axios 自动解析 JSON,可以通过设置 responseType 来更改行为,例如 responseType: 'text'

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏