承诺未按预期解决

Question

我是承诺世界的新手，所以请启发我以下场景：

    function promiseDemo(fetch1,fetch2){
        return Promise.all([fetch1,fetch2]).then(function(values){
        return values[0]+values[1];
        });
    }
   promiseDemo(ajax('sample1.html'),ajax('sample2.html')).then(function(sum){
    console.log(sum);
   },function(){
      console.log('Whoopsie!!!!!'); 
   });

 function ajax(file){
    var httpRequest=new XMLHttpRequest();
    httpRequest.open('GET',file,true);
    httpRequest.onreadystatechange=function(){
    if( httpRequest.readyState == 4){
        if(httpRequest.status == 200){
            console.log('success');
            console.log(httpRequest.responseText);
            return Promise.resolve(httpRequest.responseText);   
        }else{
        console.log('unexpected 400 error');
        return 0;
    }
  }
 }
 httpRequest.send();
 }

上面的代码从两个文件 sample1 和 sample2 中获取示例 html，并且仅在检索两个文件时才将文本附加到 dom 中。但即使 reponseText 符合预期，我也会将值 [0] 和值 [1] 作为未定义。问题出在哪里？？欢迎任何建议，谢谢!!!

Answer 1

如果在httpRequest.onreadystatechange函数中的任何位置使用return，则不会从ajax返回值，而是从onreadystatechange事件本身返回值。

如果需要用 Promise 包装回调代码，则需要使用 Promise 构造函数：

 function ajax(file) {
     return new Promise((resolve, reject) => {
          var httpRequest = new XMLHttpRequest();
          httpRequest.open('GET', file, true);
          httpRequest.onreadystatechange = function() {
              if (httpRequest.readyState == 4) {
                  if (httpRequest.status == 200) {
                      console.log('success');
                      console.log(httpRequest.responseText);
                      resolve(httpRequest.responseText);
                  } else {
                      console.log('unexpected 400 error');
                      reject(0);
                  }
              }
          }
          httpRequest.send();
     });
 }

仅供参考，有一种称为fetch的新方法已经实现了您正在寻找的内容。您可以将其用作：

promiseDemo(fetch('sample1.html'),fetch('sample2.html')).then(function(sum){
    console.log(sum);
   },function(){
      console.log('Whoopsie!!!!!'); 
   });

GitHub 上提供了浏览器的填充码。

Answer 2

这里的问题是ajax函数返回undefined，而不是应该由onreadystatuschange函数解析/拒绝的承诺。我认为这应该适合你...

 function ajax(file){
    return new Promise(function (resolve, reject) {
        var httpRequest=new XMLHttpRequest();
        httpRequest.open('GET', file, true);
        httpRequest.onreadystatechange = function(){
            if(httpRequest.readyState == 4){
                if(httpRequest.status == 200){
                    console.log('success');
                    console.log(httpRequest.responseText);
                    resolve(httpRequest.responseText);   
                }
                else {
                    reject({status: httpRequest.status});
                    return 0;
                }
            }
        }
        httpRequest.send();
    }
}

Answer 3

我相信

您的ajax函数不会返回承诺，因此promiseDemo不会获得任何要解析的承诺值。尝试检查传递到promiseDemo函数的内容。

如果这是问题所在，您可以通过在立即返回并在 http 请求回调函数中解决的 ajax 函数中创建新承诺来修复它。