javascript - Promise 未按预期解决

Question

我是 promise 世界的新手，所以请启发我以下场景:

    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

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

如果您需要用 Promise 包装回调代码，则需要使用 Promise constructor :

 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!!!!!'); 
   });

浏览器的polyfill可在 GitHub 上找到。 .