新手到 Express-如何从前端 JS 到后端进行 api 调用答案

【问题标题】：Newbie to Express- how to make api calls from frontend JS to backend新手到 Express-如何从前端 JS 到后端进行 api 调用
【发布时间】：2022-01-28 04:35:29
【问题描述】：

我正在开发一个使用 Nasa Mars Rover api 数据的纯 Javascript 项目，并使用不可变 Js、纯函数和函数式编程向页面显示图像和信息，并使用商店来保存应用程序状态。

该项目有一个使用 Node Express 的后端服务器，该服务器使用 async-await 进行获取，然后前端应该从服务器获取。我是使用 Node Express 的新手，我发现数据在 Chrome 开发工具网络选项卡中显示为未定义。在控制台中，似乎 catch 子句运行并在那里打印错误。我尝试了各种不同的东西，但似乎没有任何效果。请帮忙？

我的不可变存储

let store = Immutable.Map({
  rovers: Immutable.List(["Curiosity", "Opportunity", "Spirit"]),
  roverInfo: Immutable.Map({}),
});

来自我的 index.js 服务器


// Fetching rover photos from the Mars api 

app.get('/rovers/:rover', async (req, res) => {
    const rover = req.params;
    try {
     let images = await fetch (`https://api.nasa.gov/mars- photos/api/v1/rovers/${rover}/latest_photos?api_key=${apiKey}`)
     .then((res) => res.json()); 
      res.send({images});
            
        } catch (error) {console.log('error:', error);
        } });



// fetching rover info on the selected rover from the Mars api

app.get('/manifests/:chosenRover', async (req, res) => {
    
    const chosenRover = req.params;
    try {
        let data = await fetch (`https://api.nasa.gov/mars-photos/api/v1/manifests/${chosenRover}?api_key=${apiKey}`)
            .then((res) => res.json()); res.send({data});
                
    } catch (error) {console.log('error:', error); }
             });

来自我的 client.js 前端


const roverImage =  (store, rover) => {
   
       const images = fetch(`http://localhost:3000/rovers/${rover}`)
        .then((res) => res.json())
        .then((rover) => console.log(rover))
        .then((rovers) => updateStore(store, { rovers }));
        // return rovers;
    };



const getRoverInfo =  ( store, chosenRover) => {
    const roverInfo = fetch(`http://localhost:3000/manifests/${chosenRover}`)
        .then((res) => res.json())
        .then((chosenRover) => console.log(chosenRover))
      
        .then((roverInfo) => updateStore(store, { roverInfo }));
    // return chosenRover;
  };

更新：

我被建议展示错误的例子——所以他们在这里

My console logs

My network tab

【问题讨论】：

提示，如果您的问题标题中包含您的问题的描述，这可能会很有用。如果您可以实际显示您看到的错误，这也会很有帮助。
分解问题。听起来您的服务器端代码没有获得您期望的数据。从那里开始。忘记客户端代码。直接向服务器发出请求（例如，使用RESTed 之类的工具。查看响应的详细信息。
这可能是错字，因为 URL 中有一个流氓空格。
也许它们是小写的，如果您将规范更改为 rovers: Immutable.List(["curiosity", "opportunity", "spirit"]), 是否有效

标签： javascript node.js api express functional-programming

【解决方案1】：

Req.params 返回通过 url 传递的可能值的对象。例如： https://test.com/rovers?name=Sojourner&size=25

如果这些是我的参数，获取方法如下：

const rover = req.params;
console.log(rover.name, rover.size);

output: Sojourner 25

您所做的是将对象直接粘贴到您正在查询的 url 中，这会导致错误。

当你这样做时，你的漫游者变量将具有以下值

{
    name: Sojourner,
    size: 25
}

这是一个对象，而不是应有的字符串。

编辑。

我忘了你是直接在url中传递参数的。要解决您的问题，只需将 .rover 添加到 req.params。

// Example test API
// http://localhost:3000/rovers/curiosity

app.get('/rovers/:rover', async (req, res) => {
  const rover = req.params.rover;
  try {
    let images = await fetch (`https://api.nasa.gov/mars- photos/api/v1/rovers/${rover}/latest_photos?api_key=${apiKey}`)
        .then((res) => res.json());
    res.send({images});

  } catch (error) {console.log('error:', error);
  } });

来自https://expressjs.com/en/guide/routing.html的另一个例子

Route path: /users/:userId/books/:bookId
Request URL: http://localhost:3000/users/34/books/8989
req.params: { "userId": "34", "bookId": "8989" }
req.params.userId: 34
req.params.bookId: 8989

【讨论】：