如何从后端获取外部api (serp api)中的json，然后为我的前端应用程序提供相同的数据？

Question

现在，我有一个使用axios的前端react应用程序和一个使用node.js和express的后端服务器。在我的一生中，我无法将我的serp api数据发布，这样我的前端就可以通过axios获得它并显示json数据。我知道如何将数据发送到前端，但我不是后端开发人员，因此目前证明这是非常困难的。我能够从外部api中获取数据，只是我不知道如何在得到它之后发布它。而且，我不希望所有这些请求都在server.js上运行，所以我创建了一个控制器，但我认为这就是它搞砸的地方。任何帮助都是非常感谢的。

//pictures controller 

const SerpApi = require('google-search-results-nodejs');
const {json} = require("express");
const search = new SerpApi.GoogleSearch("674d023b72e91fcdf3da14c730387dcbdb611f548e094bfeab2fff5bd86493fe");
const handlePictures = async (req, res) => {
const params = {
    q: "Coffee",
    location: "Austin, Texas, United States",
    hl: "en",
    gl: "us",
    google_domain: "google.com"
};

const callback = function(data) {
    console.log(data);
    return res.send(data);
};

// Show result as JSON
search.json(params, callback);
    //res.end();
}
// the above code works. how do i then post it to the server so that i can retrieve it to the backend?

    module.exports = {handlePictures};

//server.js

const express = require('express');
const app = express();
const path = require('path');
const cors = require('cors');
const corsOptions = require('./config/corsOptions');
const { logger } = require('./middleware/logEvents');
const errorHandler = require('./middleware/errorHandler');
const cookieParser = require('cookie-parser');
const credentials = require('./middleware/credentials');
const PORT = process.env.PORT || 3500;

// custom middleware logger
app.use(logger);

// Handle options credentials check - before CORS!
// and fetch cookies credentials requirement
app.use(credentials);

// Cross Origin Resource Sharing
app.use(cors(corsOptions));

// built-in middleware to handle urlencoded form data
app.use(express.urlencoded({ extended: false }));

// built-in middleware for json 
app.use(express.json());

//middleware for cookies
app.use(cookieParser());

//serve static files
app.use('/', express.static(path.join(__dirname, '/public')));

// routes
app.use('/', require('./routes/root'));
app.use('/pictures', require('./routes/api/pictures'));



app.all('*', (req, res) => {
    res.status(404);
    if (req.accepts('html')) {
        res.sendFile(path.join(__dirname, 'views', '404.html'));
    } else if (req.accepts('json')) {
        res.json({ "error": "404 Not Found" });
    } else {
        res.type('txt').send("404 Not Found");
    }
});


app.use(errorHandler);

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

//api/pictures.js
const picturesController= require('../../controllers/picturesController');
const express = require('express')
const router = express.Router();



// for POST request use app.post
router.route('/')
.post( async (req, res) => {
    // use the controller to request external API
    const response = await picturesController.handlePictures()
    // send the response back to client
    res.json(response)
})


module.exports = router;

Answer 1

您只需要在SerpApi函数中返回来自handlePictures的结果。为此，创建一个new Promise，当search.json运行回调时，对结果执行所需的操作，并将其传递到resolve中。

您的picturesController.js有一个返回所有结果的示例。

//pictures controller

const SerpApi = require("google-search-results-nodejs");
const { json } = require("express");
const search = new SerpApi.GoogleSearch(process.env.API_KEY);         //your API key from serpapi.com
const handlePictures = async (req, res) => {
  return new Promise((resolve) => {
    const params = {
      q: "Coffee",
      location: "Austin, Texas, United States",
      hl: "en",
      gl: "us",
      google_domain: "google.com",
    };

    const callback = function(data) {
        resolve(data);
    };

    search.json(params, callback);
  });
};

module.exports = { handlePictures };

输出：

​

我建议你使用将API键更改为SerpApi，以防止它被外人使用。

Answer 2

由于我没有您的应用程序的完整上下文，所以我可以假设上下文。但是，考虑到您已经将调用外部API的逻辑封装到一个专用控制器中，您可以在express应用程序(使用hello示例 )中使用它：

// import your controller here
const express = require('express')
const app = express()
const port = 3000

// for POST request use app.post
app.get('/', async (req, res) => {
  // use the controller to request external API
  const response = await yourController.method()
  // send the response back to client
  res.json(response)
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

下面是一个如何从前端执行http请求的示例：

const response = await fetch('http://localhost:3000') // result from res.json(response)