Зачем Promise возвращать пустую строку?

Question

У меня есть функция foo, которая делает запрос Ajax.Я попытался вернуть данные из обратного вызова и успешно получил данные с помощью «xhr.onload», но получил пустую строку («») с помощью «xhr.onreadystatechange».

Может кто-нибудь сказать мне, почему ??

Большое спасибо!

function foo(url){

  return new Promise(function(resolve,reject){
   var xhr = new XMLHttpRequest();
   xhr.open("GET",url,true);
//    xhr.onload = function(){
//     if(xhr.status == 200){             
//         resolve(xhr.responseText);
//         }else{
//          reject("false")
//         }
//    }
   xhr.send();
   xhr.onreadystatechange = function(){
      if(xhr.readyState && xhr.status == 200){             
          resolve(xhr.responseText);
      }else{
          reject("false")
      }

   }
 })

}

foo(url).then(function (data){
   console.log(data)
},function (err){
   console.log(err)
})

Answer 1

Ваш обработчик onreadystatechange неверен.Вам нужно проверить readyState для значения 4 (а не просто для истинного значения), и вы не хотите отклонять, пока readyState не станет 4:

  if(xhr.readyState === 4){
      if (xhr.status == 200) { // or xhr.status >= 200 && xhr.status < 300
          resolve(xhr.responseText);
      } else {
          reject("false")
      }
  }

Но с современными браузерами вы 'Возможно, вместо этого используйте fetch, что уже дает обещание.Только не делайте этих распространенных ошибок (это пост в моем анемичном небольшом блоге).

Что касается того, почему вы видели то, что видели, так как вы позвонили open иsend до прикрепления обработчика, очевидно, вы не получили обратный вызов для readyState 1 (открытый), поэтому похоже, что первый полученный вами обратный вызов был, когда были получены заголовки (readyState 2), и в этот момент xhr.status будет установлено - значит, вы выполняете свое обещание, но, конечно, тело запроса еще не получено.