承诺未按预期解决

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 符合预期时，我也会将 values[0] 和 values[1] 设为未定义。有什么问题??欢迎提出任何建议，谢谢！！！！

Answer 1

如果你return在httpRequest.onreadystatechange函数内部的任何地方使用，你不是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 上提供了用于浏览器的polyfill。