How to get multiple api with axios?

Question

I want to get multiple api in the same page. With the following code, all the return data from "apione" is work, but not sure why I get nothing from the "apitwo".

async created() {

    let apione = "https://k67r3w45c4.execute-api.ap-southeast-1.amazonaws.com/TwitterTrends";
    let apitwo = "http://ec2-54-179-187-25.ap-southeast-1.compute.amazonaws.com/Test/?param1=HelloHanbinIsFREE"


    try {
      const res = await axios.get(apione);

      this.toptrends1 = res.data[0].Trends;
      this.toptrends2 = res.data[1].Trends;
      this.toptrends3 = res.data[2].Trends;
      this.toptrends4 = res.data[3].Trends;
      this.toptrends5 = res.data[4].Trends;

      this.tweet1 = res.data[0].TweetVolume;
      this.tweet2 = res.data[1].TweetVolume;
      this.tweet3 = res.data[2].TweetVolume;
      this.tweet4 = res.data[3].TweetVolume;
      this.tweet5 = res.data[4].TweetVolume;

      var thetime = res.data[0].retrievalDate
      thetime = thetime.split("T")[0];
      this.time = thetime

      // ----------------------------------API 2 -------------------------------------

      const res2 = await axios.get(apitwo);
      this.trend1fre = res2.data[0].Frequency;


    } catch (e) {
      console.errpr(e);
    }
  },

score 1 · Answer 1 · answered Feb 27 '20 at 10:17

Open the Developer Tools in your browser. Look at the Console. Read the error messages.

When I test your code, I get:

Mixed Content: The page at 'https://jsbin.com/?html,js,console' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ec2-54-179-187-25.ap-southeast-1.compute.amazonaws.com/Test/?param1=HelloHanbinIsFREE'. This request has been blocked; the content must be served over HTTPS.

One of your APIs uses HTTP the other uses HTTPS. They should both use the same scheme as you used to load the HTML document (and that should almost certainly be HTTPS).

oh, my mistake, the code is work, just the api is broke, thanks! — Charlie, Feb 28 '20 at 03:32

score -1 · Answer 2 · answered Feb 27 '20 at 11:34

the problem with the response from apitwo is just the lack of the necessary Access-Control-Allow-Origin header, you can still get things to work—by making the request through a CORS proxy. replace below

const res2 = await axios.get(apitwo);

with

const res2 = await axios.get('https://cors-anywhere.herokuapp.com/'+apitwo);

for further research on the problem go to this stackover flow answer

score -3 · Answer 3 · answered Feb 27 '20 at 10:14

-3

try axios.all([apione, apitwo])

answered Feb 27 '20 at 10:14

Reja Jamil

35
3

How to get multiple api with axios?

3 Answers3