如何使javascript fetch同步?

前端之家收集整理的这篇文章主要介绍了如何使javascript fetch同步?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > How do I return the response from an asynchronous call?33个
> How to return data from promise4个
> How to get response data outside promise chain of Fetch? 1个
我正在使用fetch从api获取数据json.工作正常,但我必须重复使用它进行各种调用,因此它需要是同步的,否则我需要一些方法来在每个组件的提取完成时更新接口.
  1. function fetchOHLC(yUrl){
  2. fetch(yUrl)
  3. .then(response => response.json())
  4. .then(function(response) {
  5. alert(JSON.stringify(response.query));
  6.  
  7. var t = response.created;
  8. var o = response.open;
  9. var h = response.high;
  10. var l = response.low;
  11. var c = response.close;
  12.  
  13. return {t,o,h,l,c};
  14.  
  15. })
  16. .catch(function(error) {
  17. console.log(error);
  18. });
  19. }
  20.  
  21. var fetchData = fetchOHLC(yUrl);
  22. alert(fetchData); // empty ?

除了使用fetch之外,还有其他方法可以实现吗? (我不想优先使用jquery).

谢谢

编辑

问题是关于fetch-api,而不是ajax,而不是jquery,所以请不要在没有正确阅读的情况下将其标记为重复这些问题.如果您仍然觉得有必要这样做,请停止将其与十年前的问题和答案联系起来,十年后会发生很多变化.

解决方法

你希望你的fetch函数返回:
  1. function fetchOHLC(yUrl){
  2. return fetch(yUrl)
  3. .then(response => response.json())
  4. .then(function(response) {
  5. alert(JSON.stringify(response.query));
  6.  
  7. var t = response.created;
  8. var o = response.open;
  9. var h = response.high;
  10. var l = response.low;
  11. var c = response.close;
  12.  
  13. return {t,c};
  14.  
  15. })
  16. .catch(function(error) {
  17. console.log(error);
  18. });
  19. }

现在fetchData包含一个可以很容易使用的promise:

  1. var fetchData = fetchOHLC(yUrl);
  2. fetchData.then(alert); //not empty ! its {t,c}

如果你想要一些花哨的ES7,你可以像这样重写整个事情:

  1. async function fetchOHLC(yUrl){
  2. try{
  3. var r=JSON.parse(await fetch(yUrl))
  4. alert(JSON.stringify(r.query));
  5. return {t:r.created,o:r.open,h:r.high,l:r.low,c:r.close};
  6. }catch(e){console.log(e);}
  7. }
  8.  
  9. (async function(){
  10. var fetchData = await fetchOHLC(yUrl);
  11. alert(fetchData);
  12. })()

猜你在找的JavaScript相关文章