如何使用axios来"获取所有()"

Question

我不知道如何使用axios从url数组中获取数据。但我可以用fetch来做。以下代码运行良好：

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

当我打index(["https://vimeo.com/216850224", "https://vimeo.com/642263700"])这样的电话时，我的控制台会显示一个数组，其中包含vimeo必须给我的所有视频元细节。这太完美了。

但当我注释掉使用fetch和使用axios的行时，我得到了一个CORS错误。

从axios中的一堆url中提取数据的惯用方法是什么？

---

编辑

我也试过了，但.all()函数似乎不存在

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

Answer 1

您可以像下面这样轻松地完成：

(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>

Answer 2

Axios版本会略有不同，因为它会自动解码并将响应体嵌入response.data属性(不需要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)
}

---

何时提取response.data完全取决于您。它也可能看起来像这个

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

---

FYI，您的fetch()版本也可以更干净一点。。。

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()
})
)