javascript - 链式 promise 会给出未定义的函数错误，但我可以单独执行这些函数

Question

我正在尝试在设置 textContent 之前链接一些 API 调用一些spans在我的网页中。我可以通过将以下 ajax API 调用粘贴到控制台来单独执行它们，但是当我将它们链接为 promise 时，我得到 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);

这是在 <script> 之间标签位于 </body> 之前。那么调用getFirstData()有什么问题吗？最后一行导致解释器说它是 undefined ？作为引用，在网络日志中，getSecondData() 被发送并返回得很好。

(注意:我专门尝试在不使用 JQuery 的情况下执行此操作)。

Answer 1

出现此问题的原因是您的函数在有机会返回 Promise.resolve 之前就返回了 undefined(换句话说，在返回之前到达了函数 block 的末尾) ('1')。

您的函数必须立即返回一个 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();
    });
}

然后将其捕获到 thenable 链中:

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

查看工作 jsfiddle