承诺未按预期解决 [英] Promise not resolving as expected

问题描述

我对允诺世界是陌生的，因此请启发我以下情形:

I'm new to the promise world so pls enlighten me on the following scenario:

    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]定义为undefined.是问题吗?欢迎您提出任何建议，谢谢！！！！

The above code takes sample html from two files sample1 and sample2 and appends the text to the dom only when both are retreived.but im gettting values[0] and values[1] as undefined even when reponseText is as expected.What is the problem ??Any suggestion is welcome thank u!!!!

推荐答案

如果在 httpRequest.onreadystatechange 函数内部的任何地方使用 return ，则不会从中返回值 ajax ，但来自 onreadystatechange 事件本身.

If you use return anywhere inside the httpRequest.onreadystatechange function, you are not returning a value from ajax but from the onreadystatechange event itself.

在需要用Promise包装回叫代码的情况下，需要使用

In cases where you need to wrap callback code with a Promise, you need to use the 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 fetch ，它已经实现了您要寻找的东西.您可以将其用作:

Just for reference, there is a new method called fetch which already achieves what you are looking for. You can use it as:

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

可在 GitHub 上获得用于浏览器的polyfill.

A polyfill for browsers is available on GitHub.

这篇关于承诺未按预期解决的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！