从外键数组中获取数据

Question

我有两个集合在我的MongoDB餐厅和菜肴，我试图进入到一个特定的餐厅，并根据外键id在"dishes"restaurant对象中的数组这是一个餐厅的样子的例子:

[
{
"_id": "63a877556959f4b58c5042cf",
"name": "Claro",
"chef": "Ran Shmueli",
"establishYear": 1990,
"dishes": [
"63aeb686a8b59bf5aac97702",
"63aeb923a8b59bf5aac97705",
"63aeb9d0a8b59bf5aac97708",
"63aebad9a8b59bf5aac9770b",
"63aebc8aa8b59bf5aac9770e",
"63aebe21a8b59bf5aac97711",
"63aebfafa8b59bf5aac97714",
"63aec14da8b59bf5aac97717",
"63aec254a8b59bf5aac9771a"
]
}
]

我不知道我是否成功地解释了我的问题。

我希望访问属于特定餐厅的dish对象，这是我在前端项目中的fetch函数，我不知道该在URL中确切地放入什么:

const fetchData = async () => {
try {
const url = ("http://localhost:3001/api/restaurants/getRestaurants/");
const response = fetch(url).then((res) =>
res.json()).then((data) => console.log(data));
return response;
}
catch (error) {
throw error;
}
}

Answer 1

您的问题是您的.then(data => console.log(data))。当console.log返回undefined时，response变成一个承诺，解析为undefined-

const fetchData = async () => {
try {
const url = ("http://localhost:3001/api/restaurants/getRestaurants/");
const response = fetch(url).then((res) =>
res.json()).then((data) => console.log(data)); // ❌ console.log returns undefined
return response;
}
catch (error) {
throw error;
}
}

为了解决这个问题，awaitfetch和console.log在response被接收后同步-

const fetchData = async () => {
try {
const url = ("http://localhost:3001/api/restaurants/getRestaurants/");
const response = await fetch(url).then((res) => res.json()) // ✅ await
console.log(response) // ✅
return response;
}
catch (error) {
throw error;
}
}

让它成为一个可重用的函数!

const fetchData = async (url) => { // ✅ url as parameter
try {
const response = await fetch(url).then((res) => res.json())
console.log(response)
return response;
}
catch (error) {
throw error;
}
}

fetchData("http://localhost:3001/api/restaurants/getRestaurants/").then(data => ...)

避免catch..throw反模式!try..catch块基本上是没有意义的，因为它会重新抛出发生的任何错误。允许它冒泡而不被抓住-

const fetchData = async (url) => {
const response = await fetch(url).then((res) => res.json())
console.log(response)
return response;
}

移除console.log副作用!您不希望每次fetchData调用都输出控制台。让我们编写一个trace函数，这样我们就可以看到我们感兴趣的特定数据-

const fetchData = async (url) => {
const response = await fetch(url).then((res) => res.json())
return response; // ✅ zero side effects
}
const trace = x => {
console.log(x)
return x
}

fetchData(myUrl).then(trace).then(data => ...) // ✅ trace where needed

避免async..return..await反模式!这个函数的功能与上面的完全相同-

const fetchData = url => // ✅ async not needed
fetch(url).then(res => res.json()) // ✅ await not needed

fetchData(myUrl).then(trace).then(data => ...) // ✅ works the same!

让fetchData更通用!有时您可能希望将请求类型从GET更改为POST，发送正文或更改请求的标题-

const fetchData = (url, options = {}) => // ✅ options parameter
fetch(url, options).then(res => res.json())

fetchData(myUrl).then(data => ...) // ✅ without options
fetchData(myUrl, { method: "POST", body: ... }) // ✅ with options

重命名它!fetchData现在是模糊的。命名为fetchJson或request-

const request = (url, options = {}) => // ✅ appropriate name
fetch(url, options).then(res => res.json())

request(myUrl).then(trace).then(data => ...) // ✅ clean af