Question

我正在尝试将我的API从XMLHttpRequest迁移到用于API调用的JavaScript提取。但我无法获得理想的结果。

我的主脚本调用API：

response = API.get_data()

我的API代码：

   var API = new function() {
    this.get_data  = function () 
    {fetch(url)
     .then(function(response) {
           if (response.status !== 200) {  
               console.log('Looks like there was a problem. Status Code: ' + response.status);  
               return;  
           }

           response.json().then(function(data) {  
                return data;
           });  
         })
         .catch(function(error) {
           console.log('There has been a problem with your fetch operation: ' + error.message);
          });
}

进行网络调用并检索响应数据，但我无法在主脚本中获取响应。我该怎么做？

我是否需要对传递响应数据的主脚本使用回调函数？或者是否有任何我错过的预定义方法。

Answer 1

首先，您需要{API}方法return fetch()的结果。请注意，在get_data中，您拨打了fetch()，但没有return结果。

return fetch(url).then(...)

其次，在主脚本中，您需要将结果视为Promise。 fetch()为get_data() Promise提供Response，get_data()为主脚本提供Promise data。

API.get_data().then(function(data) {
  // Same thing you did for fetch, you must do with get_data
})

如果您不理解为什么这必须是这样的话，请看一下这个问题的精彩答案：How do I return the response from an asynchronous call?

Answer 2

响应可以在promise中访问，因此以前的回调应该放在then主体中。

var API = new function() {
    this.get_data  = function () 
    {
       fetch(url)
         .then(function(response) {
           if (response.status !== 200) {  
               console.log('Looks like there was a problem. Status Code: ' + response.status);  
               return response.json();  
           }
         })
         .then(data => { 
           // do something with data here. you cannot return data because this is asynchronous
         }) 
         .catch(function(error) {
           console.log('There has been a problem with your fetch operation: ' + error.message);
          });
}

了解JavaScript Fetch调用

2 个答案: