节点API等待外部数据

Question

I'm trying to build server which will fetch data from external API and return them to the standard endpoint localhost:3000/v1/api/. The problem is that it takes around 2 sec to get the data and instead I always end up rendering an empty object.

I have 2 files. The first one data.js is to fetch the data from the external api which uses axios and looks like that:

const axios = require('axios');

class Data {
  constructor() {
    this.array = [];
    this.checkIfPageExists();
  }

  get array() {
    if (this.array.length > 0) {
      return this.array;
    }
  }

  checkIfPageExists() {
    axios.get('http://external.api.address/status')
    .then(response => {
      if (response.status === 200) {
         this.fetchData();
      }
     })
  }

  fetchData() {
    axios.get('http://external.api.address/data')
    .then(response => {
      if (response.data.length > 0) {
         this.array = response.data;
      }
     })
  }
}

module.exports = Data;

And the second file is the server itself so I can render the response to the browser.

const express = require('express');
const cors = require('cors');
const Data = require('./data');

const port = 8000;
const app = express();

const middleware = (req, res, next) => {
    const myPromise = () => {
        return new Promise(function(resolve, reject) {
            let data = new Data();
            resolve(data.array);
        });
    }

    let promise = myPromise();

    promise.then((data) => {
        if (data) {
            console.log(data)
            res.data = data;
            next();
        }
    })

}

class Server {
    constructor() {
        this.initCORS();
        this.initMiddleware();
        this.initRoutes();
        this.start();
    }

    start() {
        app.listen(port, () => {
            console.log("Listening on port: " + port);
        })
    }

    initCORS() {
        app.use(cors());
    }

    initMiddleware() {
        app.use(middleware);
    }

    initRoutes() {
        app.get("/", (req, res) => {
            res.send(JSON.stringify(res.data, null, '\t'));
        });
    }

}

new Server();

I am always getting an empty object before the data is even fetched from the external API. I thought that Promise will help but nope still the same issue. Any ideas how this should be done in a right way?

Answer 1

in the second file (the server), you wrote this:

return new Promise(function(resolve, reject) {
        let data = new Data();
        resolve(data.array);
    });

Ok, i suspect based on the first file, the Data constructor is calling to a "async" function:

this.checkIfPageExists();

This function is calling to axios.get, I presume this is a promise and the execution of the constructor is continuing before the response of checkIfPageExists, basically in the second file when you writing:

let data = new Data();
resolve(data.array);

Is executing resolve without a response.

You need to rewrite this logic for wait to promise resolve/reject.

For example:

const axios = require('axios');
class Data {
  constructor() {
    this.array = [];
    // --- FIX: No check in this line ---
  }

  get array() {
    if (this.array.length > 0) {
      return this.array;
    }
  }

  checkIfPageExists() {
    // return a promise:
    return new Promise((resolve, reject) => {
      axios.get('http://external.api.address/status')
      .then(response => {
        if (response.status === 200) {
           this.fetchData().then(()=>{ resolve(); });
        }
      })
     });
  }

  fetchData() {
    // return the promise:
    return axios.get('http://external.api.address/data')
    .then(response => {
      if (response.data.length > 0) {
         this.array = response.data;
      }
     })
  }
}

module.exports = Data;

In the second file, changing:

const myPromise = () => {
        return new Promise(function(resolve, reject) {
            let data = new Data();
            data.checkIfPageExists().then(()=>{
              resolve(data.array);
            })
        });
}

But is only an example, maybe you should review the structure of the code in general to adapt it.

In resume, you always wait to promises responses, as long as you do not execute the res.send() function of express the http request never response.