How to use axios to `fetch all()`

Question

I don't understand how to use axios to fetch data from an array of urls. But I can do it with fetch. The following code works perfectly:

const url = 'https://vimeo.com/api/oembed.json?url='

async index(videoUrls = []) {
  try {
    const response = await Promise.all(
      //        videoUrls.map(videoUrl => axios.$get(`${url}${encodeURIComponent(videoUrl)}`))
      videoUrls.map(videoUrl => fetch(`${url}${encodeURIComponent(videoUrl)}`))
    )
    const results = await Promise.all(response.map(r => r.json()));
    return results;
  } catch (e) {
    console.error(e)
  }
}

When I make a call like index(["https://vimeo.com/216850224", "https://vimeo.com/642263700"]), my console shows an array with all the video meta details vimeo has to give me. This is perfect.

But the moment I comment out the line that uses fetch and use axios, I get a CORS error.

What is the idiomatic way to fetch data from a bunch of urls in axios?

EDIT

I also tried this, but the .all() function doesn't seem to exist

async index(videoUrls = []) {
  try {
    const response = await axios.all(videoUrls.map(videoUrl => `${url}${encodeURIComponent(videoUrl)}`));
    return response;
  } catch (e) {
    console.error(e)
  }
}

Why is it `axios.$get()` in your question and not simply [axios.get()](https://axios-http.com/docs/api_intro#axios-get-url-config) (ie, why the dollar-sign)? Also, exactly what _"CORS error"_ do you get? — Phil, Nov 11 '21 at 04:48
Any reason you want to use Axios over `fetch()`? Personally, I'd prefer the latter since it's browser-native — Phil, Nov 11 '21 at 04:57

Salvino D'sa · Answer 1 · 2021-11-11T04:35:33.173

0

You can easily do it like below:

(async function getAll() {

  const axiosrequest1 = axios.get('https://jsonplaceholder.typicode.com/posts');
  const axiosrequest2 = axios.get('https://jsonplaceholder.typicode.com/posts');
  const axiosrequest3 = axios.get('https://jsonplaceholder.typicode.com/posts');

  const [res1, res2, res3] = await Promise.all([axiosrequest1, axiosrequest2, axiosrequest3]);
  console.log('request1', res1.data);
  console.log('request2', res2.data);
  console.log('request3', res3.data);
})();

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

edited Nov 11 '21 at 04:35

answered Nov 11 '21 at 04:18

Salvino D'sa

4,018
1
7
19

@Phil my bad! Updated my answer. You can easily replace `axios.all` with `Promise.all` to achieve this. – Salvino D'sa Nov 11 '21 at 04:38

Phil · Answer 2 · 2021-11-11T05:06:32.993

The Axios version would be slightly different because it automatically decodes and embeds the response body into the response.data property (no need for res.json())

const baseUrl = "https://vimeo.com/api/oembed.json"

const index = async (videoUrls = []) => {
  // create an array of responses and wait for them to resolve
  const responses = await Promise.all(
    videoUrls.map(url => axios.get(baseUrl, { params: { url } })
  )

  // extract the `data` properties and return them as an array
  return responses.map(({ data }) => data)
}

Exactly when you extract response.data is totally up to you. It could also look like this

const index = (videoUrls = []) => Promise.all(
  videoUrls.map(async (url) => (
    await axios.get(baseUrl, { params: { url } })
  ).data)
)

FYI, your fetch() version could be a little cleaner too...

const baseUrl = "https://vimeo.com/api/oembed.json"

const index = (videoUrls = []) => Promise.all(
  videoUrls.map(async (url) => {
    const params = new URLSearchParams({ url })
    const res = await fetch(`${baseUrl}?${params}`)
    if (!res.ok) { // check for bad response
      throw new Error(`${res.status}: ${await res.text()}`)
    }
    return res.json()
  })
)

How to use axios to `fetch all()`

2 Answers2