寻找可重用的异步 XMLRequest 函数

Question

我正在创建一个主要使用游戏的客户端网络应用程序-API 来显示统计数据和库存。这个应用程序需要一个接一个地执行几个获取请求，我正在尝试考虑一个简单的函数，它可以处理多个不同的请求，并且总是只返回响应，同时等待上一个请求完成。

我当前的函数不等待请求完成，所以 $temp 仍未定义。

function BClick(){
        rqURL = 'https://endpoint';
        temp = getRequest(rqURL);
        console.log(temp);
}

function getRequest(URL) {
    akey = '000';
    var xr = new XMLHttpRequest();
    xr.open("GET", URL);
    xr.setRequestHeader("X-API-Key",akey);

    xr.onreadystatechange = () => {
        if (xr.readyState === 4) {
            xh = JSON.parse(xr.responseText);
            return xh;
        }
    };
    xr.send();
}

我怎样才能使所有这些异步并等待响应完成？我试过研究 'async function(){}' 但这需要我将 get-request 放在第一个函数中。这将消除可重用性，因为我需要以不同的方式处理响应。

目前我正在考虑一个在特定变量获取数据时执行的函数，因此它只会注意每个响应变量。肯定有 'nicer' 方法，我不知道。

Answer 1

您可以使用简单的回调或承诺。

有承诺

function getRequest(URL, akey) {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open('GET', URL);
    request.setRequestHeader('X-Api-Key', akey);
    request.onload = () => {
      if (request.status === 200) {
        resolve(request.response);
      } else {
        reject(Error(request.statusText));
      }
    };
    request.onerror = () => {
      reject(Error('Network Error'));
    };
    request.send();
  });
}

// Use with 'then' chain

getRequest('url', '000').then(function(responseData) {
  // parse data here if necessary
  console.log(responseData);
}).catch(function(error) {
  // handle error
  console.log(error);
});

但是，浏览器 fetch API 已经具备此功能，因此您可以改用它。

有回调

function getRequest(URL, akey, successCallback, failCallback) {
  const request = new XMLHttpRequest();
  request.open('GET', URL);
  request.setRequestHeader('X-Api-Key', akey);
  request.onload = () => {
    if (request.status === 200) {
      successCallback(request.response);
    } else {
      failCallback(Error(request.statusText));
    }
  };
  request.onerror = () => {
    failCallback(Error('Network Error'));
  };
  request.send();
}

// usage
getRequest(
  'url',
  '000',
  function (responseData) {
    // use data
    console.log(responseData);
  },
  function (error) {
    // handle error
    console.log(error);
  },
);

这些是针对您的具体情况，但您可以传递更多参数并根据需要进行改进。

寻找可重用的异步 XMLRequest 函数

Looking for a reusable async XMLRequest-Function

javascript

get

function