Chained Promise给出了未定义的函数错误，但我可以单独执行这些函数

Chained promises give undefined function error, but I can execute the functions separately

本文关键字：函数 我可以 单独 执行 错误 未定义 Chained Promise      更新时间：2024-01-31

在我的网页中设置某些spans的textContent之前，我正在尝试链接一些API调用。我可以通过将以下ajax API调用粘贴到控制台中来单独执行它们，但当我将它们作为承诺链接时，我会得到getFirstData() is undefined。

var first_data = [],
    second_data = [];
function getFirstData(){
    var xhr = new XMLHttpRequest();
    var url = "/API/first-data?format=json"
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            first_data = JSON.parse(xhr.responseText);
            return Promise.resolve('1');
        }
    }
    xhr.open("GET", url, true);
    xhr.send();
}
/*getSecondData is the same, but with a different API url. I'll DRY these 
two into one function that takes a url argument when I get it working.*/
getFirstData().then(getSecondData).then(createPage);

这是在</body>之前的<script>标记之间。那么，最后一行对getFirstData()的调用有什么问题，导致解释器说它是undefined呢？作为参考，在网络日志中，会发送getSecondData（）并返回正常值。

（注意：我特别想在没有JQuery的情况下完成此操作）。

出现此问题是因为函数在返回Promise.resolve('1')之前返回了undefined（换句话说，在返回之前到达函数块的末尾）。

您的函数必须立即返回一个Promise对象，该对象在最终解析AJAX处理程序之前变为挂起状态。

我还将使用提供的reject参数添加错误处理，这是Promise对象的标准配置。

function getFirstData(){
    return new Promise(function(resolve, reject) { // encapsulate code in a promise which returns immediately
      var xhr = new XMLHttpRequest();
      var url = "/echo/json"
      xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {
              first_data = JSON.parse(xhr.responseText);
              return resolve('1');
          }
          else {
            return reject('There was an error!') // reject the promise if error occurs
          } 
      }
      xhr.open("GET", url, true);
      xhr.send();
    });
}

然后在下一条链中捕获：

getFirstData()
.then(getSecondData)
.catch(function(err){Throw err}) // catch the error if it throws
.then(createPage);

请参阅工作jsfiddle

getFirstData没有返回promise，而是返回undefined，这是不可能的。

function getFirstData(){
    return new Promise(function(resolve) {
      var xhr = new XMLHttpRequest();
      var url = "/API/first-data?format=json"
      xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {
              first_data = JSON.parse(xhr.responseText);
              resolve('1');
          }
      }
      xhr.open("GET", url, true);
      xhr.send();
    });
}
相关文章：