如何使用 axios 获取多个 api？

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);
    }
  },

Answer 1

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).

Answer 2

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

Answer 3

尝试axios.all([apione, apitwo])