如何将两个调用的端点连接到一个字符串并在控制台中打印

Question

我的函数必须调用两个端点并将它们同时连接到一个字符串中。我的代码只是一个同时获取两个端点并在控制台中打印的函数。但是同一个函数必须将它们连接成一个字符串。我尝试创建包含每个调用的单独变量，然后简单地连接它们，但结果没有任何不同。我读了几个小时，但我看不到任何地方，即使是最小的提示。编辑：请注意每个端点都是一个实际数组。

    function endpointsToOneString() {
        const Http = new XMLHttpRequest();
        const url = 'https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json';
        Http.open("GET", url);
        Http.send();

        Http.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                console.log(Http.responseText)
            }
        }


        const HttpTwo = new XMLHttpRequest();
        const urlTwo = 'https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json';
        HttpTwo.open("GET", urlTwo);
        HttpTwo.send();

        HttpTwo.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                console.log(Http.responseText)
            }
        }
    }

    endpointsToOneString();

Answer 1

不是立即打印它们，而是将它们保存到局部变量，然后在最后打印它们：

function endpointsToOneString() {
    let response;          // this line here declares the local variable
    results = 0;           // counts results, successful or not
    const Http = new XMLHttpRequest();
    const url = 'https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json';
    Http.open("GET", url);
    Http.send();

    Http.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            response = Http.responseText;   //save one string
        }
        if (this.readyState == 4) {
            results++;
        }
    }


    const HttpTwo = new XMLHttpRequest();
    const urlTwo = 'https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json';
    HttpTwo.open("GET", urlTwo);
    HttpTwo.send();

    HttpTwo.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            response += HttpTwo.responseText // save the other string
        }
        if (this.readyState == 4) {
            results++;
        }
    }

    while(results < 2) {}  //loops until both requests finish, successful or not
    console.log(response); //print total string
}

endpointsToOneString();

此外，HttpTwo 的 onreadystatechange 函数正在调用 Http.responseText，而不是 HttpTwo.responseText。为了获得最佳效果，也要修复该问题。

编辑：感谢 Jhon Pedroza 的提示！

编辑： Noah B 指出上面的内容很脏且效率低下。他们是完全正确的。根据他们的建议更好的版本，感谢他们：

function endpointsToOneString() {
    let response1 = '', response2 = ''; // this line declares the local variables
    const Http = new XMLHttpRequest();
    const url = 'https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json';
    Http.open("GET", url);
    Http.send();

    Http.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            response1 = Http.responseText;   //save one string
            checkResults(response1, response2);
        }
    }


    const HttpTwo = new XMLHttpRequest();
    const urlTwo = 'https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json';
    HttpTwo.open("GET", urlTwo);
    HttpTwo.send();

    HttpTwo.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            response2 = HttpTwo.responseText; // save the other string
            checkResults(response1, response2);
        }
    }
}

function checkResults(r1, r2) {
    if (r1 != '' && r2 != '') {
        console.log(r1 + r2);
    }
}

endpointsToOneString();

Answer 2

function endpointsToOneString() {
    var response;
    const Http = new XMLHttpRequest();
    const url = 'https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json';
    Http.open("GET", url);
    Http.send();

    Http.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            response = this.responseText;
            HttpTwo.open("GET", urlTwo);
            HttpTwo.send();
        }
    }


    const HttpTwo = new XMLHttpRequest();
    const urlTwo = 'https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json';

    HttpTwo.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
           response += this.responseText; 
           console.log(response);
        }
    }
}

endpointsToOneString();

看看这个。只需对您的代码进行最少的编辑。

Answer 3

我了解到您想合并两个并行请求的结果。在这种情况下，您可以使用像 axios 这样的库。来自他们的 docs

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

所以对于你的例子：

function getEndpoint1() {
  return axios.get('https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json');
}

function getEndpoint2() {
  return axios.get('https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json');
}

axios.all([getEndpoint1(), getEndpont2()])
  .then(axios.spread(function (resp1, resp2) {
    // Both requests are now complete
     console.log(resp1 + resp2)
  }));

Answer 4

您是否必须使用 XMLHttpRequest？如果没有，你最好使用 fetch，因为它 returns Promise 并且使用 Promise 会简单得多。

Answer 5

在这种情况下，您应该使用 javascript 的 Promise 功能。

you can learn how to promisify your native XHR. Morever, Here 您可以找到有关承诺链的信息。我刚刚在您的代码中添加了 Promise，但它需要重构。

更新：从评论中，您希望您的回复文本为纯字符串。但我们实际上得到了一个 JSON 数组作为响应。因此，我们需要使用 JSON.parse() 函数对其进行解析，使其成为一个数组对象。然后我们需要使用 .join() 方法将数组的所有元素连接成一个字符串。请看下面的代码：

function endpointsToOneString() {
    var requestOne = new Promise(function(resolve, reject){
        const Http = new XMLHttpRequest();
        const url = 'https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json';
        Http.open("GET", url);
        Http.onload = function () {
        if (this.status >= 200 && this.status < 300) {
            resolve(Http.response);
        } else {
            reject({
            status: this.status,
            statusText: Http.statusText
            });
        }
        };
        Http.onerror = function () {
        reject({
            status: this.status,
            statusText: Http.statusText
        });
        };
        Http.send();
    });

    var requestTwo = new Promise(function(resolve, reject){
        const HttpTwo = new XMLHttpRequest();
        const urlTwo = 'https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json';
        HttpTwo.open("GET", urlTwo);
        HttpTwo.onload = function () {
        if (this.status >= 200 && this.status < 300) {
            resolve(HttpTwo.response);
        } else {
            reject({
            status: this.status,
            statusText: HttpTwo.statusText
            });
        }
        };
        HttpTwo.onerror = function () {
        reject({
            status: this.status,
            statusText: HttpTwo.statusText
        });
        };
        HttpTwo.send();
    });


    Promise.all([
        requestOne,
        requestTwo
    ]).then(function(result){
     var response = JSON.parse(result[0]).join();
      response += JSON.parse(result[1]).join();
      console.log(response);
    });
}
endpointsToOneString();

Answer 6

尝试查看 Promise.all 方法： https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

与一样，您应该将 XHR 包装在 Promise 中，然后处理所有函数调用的解析。通过这种方式，您可以按顺序访问端点结果。

这是一个工作 fiddle:

function makeRequest(method, url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function() {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function() {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

let url1 = 'https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json';
let url2 = 'https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=json'
Promise.all([makeRequest('GET', url1), makeRequest('GET', url2)])
.then(values => {
  debugger;
  console.log(values);
});

https://jsfiddle.net/lbrutti/octys8k2/6/

如何将两个调用的端点连接到一个字符串并在控制台中打印

How to concat two called endpoints to one string and print it in console

javascript

endpoint