包装绑定函数的问题，该绑定函数在 Promise 中生成 XMLHttpRequest

Question

我在这里尝试重用执行 XMLHttpRequest 的函数 (load_content)，

function load_content(location){

  var number = this.getAttribute("trat_number"); 
  var content = tratamientos.getElementsByClassName("content")[0];
  var title = content.getElementsByTagName("h3")[0];

  var template = new XMLHttpRequest();
  template.open('GET', 'mods/data_tratamientos.php', true);
  template.onreadystatechange = function() {
     if(template.readyState == 4) {
       if(template.status == 200) {
                    //Here it does some other things
       }
       else
       {
          alert( " An error has occurred: " + template.statusText); 
       }
     }
 };
 template.send();
}

在这个其他函数中（恰好执行另一个 XMLHttpRequest），然后在完成后执行一些其他操作。

   function get_template(location){

     //Here I get a few things to work with
     var template = new XMLHttpRequest();
     template.open('GET', location, true);
     template.onreadystatechange = function() {
       if(template.readyState == 4) {
         if(template.status == 200) {

             //More actions take place here...

             var trat_n = document.getElementsByTagName("li");
             for (i = 0, j = 1 ; i < trat_list.length; i=i+2, j++){
               trat_n[i].setAttribute("trat_number", 'trat_'+j);
               trat_n[i].addEventListener('click', function(){

                  //HERE IS THE PROBLEM
                  var load = load_content.bind(this);
                  var test = Promise.resolve(load());
                  load().then(function(){

                    //THIS IS WHAT I'M AIMING FOR

                  });
               });
              }
          }
       else
       {
          alert( " An error has occurred: " + template.statusText); 
       }
    }
  };
 template.send();
}

显然，我已经设法在单击 LI 时执行 load_content，但我得到：

Uncaught TypeError: Cannot read property 'then' of undefined at HTMLLIElement. (readmore.js:81)

当然，这是我第一次处理 Promises，如您所见。问题是：我不希望 load_content 到 return Promise，因为我将不得不重新构建更多代码。如果可能的话，我只是想将它包装在 Promise 中一次。

Answer 1

正如 Jaromanda X 提到的，您必须 return 一个 Promise 才能 .then() 工作。

示例如下：

function load_content(location) {
    // you have to return a promise
    return new Promise((resolve, reject) => {
        var number = this.getAttribute("trat_number");
        var content = tratamientos.getElementsByClassName("content")[0];
        var title = content.getElementsByTagName("h3")[0];

        var template = new XMLHttpRequest();
        template.open('GET', 'mods/data_tratamientos.php', true);
        template.onreadystatechange = function () {
            if (template.readyState == 4) {
                if (template.status == 200) {
                    //Here it does some other things

                    resolve(template.responseText);
                }
                else {
                    alert(" An error has occurred: " + template.statusText);
                    reject(template.statusText);
                }
            }
        };
        template.send();
    });
}

function get_template(location) {

    //Here I get a few things to work with
    var template = new XMLHttpRequest();
    template.open('GET', location, true);
    template.onreadystatechange = function () {
        if (template.readyState == 4) {
            if (template.status == 200) {

                //More actions take place here...

                var trat_n = document.getElementsByTagName("li");
                for (i = 0, j = 1; i < trat_list.length; i = i + 2, j++) {
                    trat_n[i].setAttribute("trat_number", 'trat_' + j);
                    trat_n[i].addEventListener('click', function () {

                        //HERE IS THE PROBLEM
                        var load = load_content.bind(this);
                        // var test = Promise.resolve(load());
                        load().then(function (response) {
                            // Here you can deal with the response
                        });
                    });
                }
            }
            else {
                alert(" An error has occurred: " + template.statusText);
            }
        }
    };
    template.send();
}

包装绑定函数的问题，该绑定函数在 Promise 中生成 XMLHttpRequest

Problem wrapping a binded function that makes an XMLHttpRequest in a Promise

javascript

bind

reference

xmlhttprequest

promise