在 React 中使用 XHR 请求获取 Mongo 集合的 JSON
介绍
当您在MERN（MongoDB、Express、React 和 Node）堆栈应用中工作时，您通常需要获取 Mongo 集合的 JSON 并在前端使用该数据。随着NoSQL数据库的普及，通过 Express 服务器通过 React 应用从 Mongo 集合中获取数据变得非常简单。
本指南将引导您完成向快速服务器上的端点发出XHR 请求以获取 MongoDB 数据库中 Mongo 集合的 JSON 的基本知识。
设置后端
如果您已经拥有一个 Express 服务器，并且该服务器具有可以获取 Mongo 集合的端点，则可以跳过此步骤。如果没有，您可以按照以下步骤使用 NodeJS 轻松设置 Express 服务器。
首先，使用以下命令创建一个新的npm项目：
npm init -y
安装 mongoose、body-parser 和 express。
npm i mongoose express body-parser
创建架构
为您的 Mongo 集合创建一个名为todoSchema的模式和一个名为Todo的模型，如下所示，然后使用module.exports将其导出。
const mongoose=require('mongoose');
const todoSchema=mongoose.Schema({
name:{
type:String,
required:true
},
status:{
type:String,
required:true
}
},{timestamps:true})
const Todo=mongoose.model('Todo',todoSchema);
module.exports=Todo;
创建控制器
创建一个控制器，使用模型上的find()方法从 Mongo 集合中获取所有待办事项，并在最后将其导出。
const Todo=require('./../models/Todo');
const getTodos=(req,res)=>{
Todo.find()
.then(result=>{
console.log('result: ',result)
res.send(result.length>0?result:'No Todos');
})
.catch(err=>{
console.log(err);
})
}
module.exports={
getTodos
}
设置 Express 路由器
通过调用Router()方法创建 express 的路由器实例。接下来，创建一个路由，该路由将充当 API 端点，通过调用get()方法并将路由作为第一个参数传递，将控制器函数作为第二个参数传递，从 Mongo 集合中获取所有待办事项。
const express=require('express');
const todoController=require('./controllers/todoConroller');
const router=express.Router();
module.exports=router.get('/todos',todoController.getTodos);
最后，通过创建一个 express 应用并连接您的 MongoDB 数据库，将所有内容整合在一起。此示例使用 MongoDB Atlas 使用dbURI字符串创建并连接到云数据库。
const express=require('express');
const mongoose=require('mongoose');
const bodyParser=require('body-parser');
const routes=require('./routes');
const PORT=5000;
const dbURI=<Add your MongoDB atlas dbURI here>
const app=express();
mongoose.connect(dbURI,{useNewUrlParser:true,useUnifiedTopology:true})
.then(()=>{
app.listen(PORT,(req,res)=>{
console.log(`connected to db`);
})
})
.catch(err=>{
console.log(err);
})
app.use(bodyParser.json())
app.use(routes)
现在，在终端中运行节点应用程序后，可以使用端点 https://localhost:5000/todos 访问您的 mongo 集合。
创建前端
您将使用的 Mongo 集合如下所示：
{
"_id": "5f709a7fe510821d48eaf3cc"
此 JSON 集合是在手动将数据添加到数据库后从上一节中创建的端点返回的。如果您想使用您的集合，请使用上一节中创建的 API，或使用本地文本文件中的上述集合作为API 模型。在这三种情况下发出 XHR 请求的方法是相同的。
发出 XHR 请求
在 React 应用程序中，导入useState和useEffect。useState钩子用于创建存储来自端点的 JSON 对象的状态。使用XMLHttpRequest对象在useEffect生命周期钩子的回调函数内发出 XHR 请求。查看以下代码：
import React,{useState, useEffect} from 'react';
import './App.css';
function App() {
const [todos,setTodos]=useState()
useEffect(()=>{
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
const response=JSON.parse(request.response)
setTodos(response)
}
};
request.open('GET', 'http://localhost:5000/todos', true);
request.send();
},[])
useEffect(()=>{
console.log(todos)
},[todos])
return (
<div className="App">
</div>
);
}
export default App;
在useEffect() 的回调函数中，创建XMLHttpRequest对象的新实例。然后使用请求方法类型（本例中为 GET）调用端点，以创建该请求的网关。此步骤至关重要，因为它告诉浏览器您现在可以向端点发出请求以获取一些资源。通过调用 send ()方法，您可以调用onreadystatechange事件触发的函数，在该函数中检查请求的readyState和状态。readyState 4表示请求已准备好处理，并且从端点收到状态 200 ，表示一切正常。在if块中，将请求中的响应对象解析为 JSON，以获取 Mongo集合 的 JSON 并将其分配给您的状态变量。这就是您发出 XHR 请求以获取 Mongo 集合的 JSON 并将其存储在组件的本地状态中的方式。最后一步，您可以通过循环遍历状态在 DOM 上呈现此集合的详细信息。
...
<div className="App">
{todos && todos.map(todo=><p>{todo.name}</p>)}
</div>
...
现在您可以在页面上看到 Mongo 收藏中的待办事项。
结论
尽管发出 XHR 请求是发出 AJAX 请求的最原始方法，但您始终应该使用 fetch API 或 Axios 等现代方法来发出 API 调用。它们易于使用，学习曲线较浅，并且可以使用诸如承诺链之类的高级功能处理多个庞大的请求。本指南中使用的相同示例可以使用 Axios 或 Fetch API 以更简洁的方式进行编码。请尝试一下，作为练习。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~