有时您想从多个不同的API端点获取一些数据。在此示例中，我将使用《星球大战》 API获取有关某些角色的信息。见下文。
const urls = [
"https://swapi.co/api/people/1",
"https://swapi.co/api/people/2",
"https://swapi.co/api/people/3",
"https://swapi.co/api/people/4",
]
从功能概述开始。这样做可以轻松地可视化正在发生的事情。我使用try / catch块，因为很容易看到发生了什么。
试着抓
- 尝试-“这样做。”
- 抓住-‘不能尝试吗？然后执行此操作。
const fetchData = async () => {
try {
} catch (error) {}
}
为此，如果尝试失败，catch块将控制台控制台记录错误并显示一条消息。
const fetchData = async () => {
try {
} catch (error) {
console.log(‘ERROR’, error)
}
}
严肃的事情发生在下面的try块中。
const fetchData = async () => {
try {
const response = await Promise.all(urls.map(url => fetch(url)))
console.log(response)
} catch (error) {
console.log("Error", error)
}
}
- 我们创建一个变量
response来保存我们的数据。 - 使用关键字await ‘。等待 -‘去为我做这个再回来。
- Promise.all方法用于告诉函数执行和处理数组中的所有 url
urls。一次一个。 - 使用.map（）数组方法遍历数组。
- 然后，我们将每个网址传递到中
fetch()。被视为url => fetch(url)
记录响应，您将看到承诺已兑现。每个网址均被点击。但是，我们希望数据使用可以使用的格式。因此，还有最后一件事要做。我们必须使响应成为JSON对象。
const fetchData = async () => {
try {
const response = await Promise.all(
urls.map(url => fetch(url).then(res => res.json()))
)
console.log(response)
} catch (error) {
console.log("Error", error)
}
}
在上面的通知中我们添加了.then(res => res.json()。我们使用.then进行链接。取一次“获取”后返回的响应或“ res”。将响应转换为我们可以使用的JSON。
代码供您尝试
const urls = [
"https://swapi.co/api/people/1",
"https://swapi.co/api/people/2",
"https://swapi.co/api/people/3",
"https://swapi.co/api/people/4",
]
const fetchData = async () => {
try {
const response = await Promise.all(
urls.map(url => fetch(url).then(res => res.json()))
)
console.log(response)
} catch (error) {
console.log("Error", error)
}
}
fetchData()