关于 HTTP 请求的数据流的困惑 - HTTP 是什么部分，JSON 是什么？

Question

我将使用以下代码作为示例来构建我的问题。它基本上只是从 SQLite3 数据库中提取待办事项列表所需的代码：

那么，前端有一个axios请求：

useEffect(() => {
    axios.get('http://localhost:3001/todo', {})
    .then(res => {
        setTodoList(res.data)
    })
    .catch(err => {
        console.log(err)
    })
}, [])

...在后端链接到以下函数：

server.get('/todo', (req,res) => {
    // res.json(testData)
    const todos = db('todos') //this is shorthand for 'return everything from the table 'todos''
    .then(todos => {
        return res.json(todos)
    })
})

..来自这个 GET 请求的数据然后在反应组件中呈现，作为文本列表。

我只是对数据流感到困惑 - 什么时候是 HTTP，什么时候是 JSON，数据从数据库中以什么形式出现，以及这些不同的协议/语言如何相互通信其他的？

我了解了 GET 请求和异步函数的总体原理，但我只是不明白幕后发生了什么。谢谢！

Answer 1

这是关于基本问题的很多问题。但这里有一些答案。首先，您可以将服务器功能简化为：

server.get('/todo', (req, res) => {
  db('todos').then(todos => res.json(todos));
}); 

当您在 Express 中处理数据时，来自 db 的数据是一个 Javascript 数组。 res.json 将其转换为 JSON，当然也只是一个字符串。

Express 创建一个 HTTP 响应，它由一些标头（键值对，例如 Content-Length: 等）和一个主体组成，在您的情况下，它只是一个 JSON blob，一个字符串。该响应对象通过 HTTP 在网络上发送。

浏览器接收响应，axios 足以处理读取标头并将 JSON 转换回 Javascript 数组/对象的繁重工作，然后可以在 React 中处理。

我无法回答的部分是“这些不同的协议/语言如何相互交谈”，因为这非常复杂，而且问题没有很好的定义。涉及到很多网络层。