How do you make axios GET request wait?(你如何让 axios GET 请求等待?)
问题描述
您好,我在使用 axios/fetch GET 时遇到问题,该 URL 具有一个参数,该参数通过数组循环迭代其值
Hi I'm having a problem with using axios / fetch GET with a URL that has a parameter that iterates through an array loop for its values
axios/fetch 不遵循数组的顺序,只返回先出现的响应.
axios / fetch doesn't follow the order of the array and just returns whichever response comes first.
我该如何解决这个问题?
How would I fix this?
const fetch = require("node-fetch");
algo = "eth" // algorithm for wtt
hashrate = ['250', '100', '50']
console.log(hashrate)
for (var i = 0; i < vhr.length; i++){
var wttURL = "https://whattomine.com/coins.json?" + algo + "=true" + "&factor%5B" + algo + "_hr%5D=" + hashrate[i]
fetch(wttURL)
.then((resp) => resp.json()) // Transform the data into json
.then(function(data) {
console.log(data.coins.Ethereum.btc_revenue)
})
目前的输出是 250 (a)、100 (b) 或 50 (c) 的结果
The output for this currently is either the results for 250 (a), 100 (b) or 50 (c)
所以基本上它要么会出现
So basically it would either come out as
a、b、c(需要)
b、c、a
a、c、b
c、b、a
等等
但我希望它按照顺序输出所以应该是
But I want it to output according to the order so it should be
a ,b ,c 总是
推荐答案
选项 1:Promise.all
简而言之:您可以使用 Promise.all() 如果您需要特定的订单.您创建一个充满承诺的数组,将其传递给 Promise.all()
,您将获得一个包含已解决承诺的数组.
In short: you can use Promise.all() if you need a specific order. You create a an array filled with promises, pass it to Promise.all()
and you'll get an array with resolved promises.
const fetch = require("node-fetch");
algo = "eth" // algorithm for wtt
hashrate = ['250', '100', '50']
wttURL = [];
for (var i = 0; i < vhr.length; i++) {
wttURL.push(fetch("https://whattomine.com/coins.json?" + algo + "=true" + "&factor%5B" + algo + "_hr%5D=" + hashrate[i]))
}
Promise.all(wttURL)
.then(responses => responses.forEach(response => console.log(response)))
.catch(err => console.log(err));
但是,由于第一个拒绝的承诺的原因,它失败了.因此,如果您有一个大数组或需要显示任何数据,则不应使用此方法.此外,这将只保留客户端上的订单!您的后端不会知道任何关于订单的信息,因为调用没有按顺序完成.
However, it fails with the reason of the first promise that rejects. So if you have a big array or you need to display any data you should not use this method. In addition, this would keep the order on the client only! Your backend would not know anything about the order since the calls are not done in order.
选项 2:异步/等待
您可以改用 async/await
.您将 await
每个结果,如果其中任何一个失败,您不必在意,因为其余的仍然可以成功.此外,您的后端也可以跟踪订单.
You could use async/await
instead. You would await
each result and if any of them fails you do not care since the rest still can succeed. Also, your backend would be able to keep track of the order too.
async function getData() {
for (var i = 0; i < vhr.length; i++) {
let wttURL = "https://whattomine.com/coins.json?" + algo + "=true" + "&factor%5B" + algo + "_hr%5D=" + hashrate[i]
await fetch(wttURL)
.then(resp => resp.json()) // Transform the data into json
.then(data => console.log(data.coins.Ethereum.btc_revenue))
.catch(err => console.log(err));
}
}
这种方法会保留客户端和后端的原始顺序(如果您记录它).但是,它比第一个解决方案慢,因为它不会继续下一个 fetch
,直到 promise 被解决.
This approach preserves the original order on the client and backend (if you log it). However, it is slower than the first solution since it does not continue with the next fetch
until the promise is resolved.
这篇关于你如何让 axios GET 请求等待?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:你如何让 axios GET 请求等待?
基础教程推荐
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01