首页 > 解决方案 > 如何将两个调用端点连接到一个字符串并在控制台中打印

问题描述

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

    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();

标签: javascriptendpoint

解决方案


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

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

这是一个工作小提琴:

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/


推荐阅读