Как определить конкретный c Ajax запрос при наличии нескольких Ajax запросов с Vanilla JS?

Question

Я хочу выполнить запрос Ajax после того, как другой запрос Ajax сработал. Если на одной и той же странице есть несколько запросов Ajax (запросы A и B, и я хочу запустить запрос C, если A запущен.), Как я могу направить запрос, который хочу? Что мне нужно запустить, чтобы заполнить код ниже?

xhr.addEventListener('readystatechange', function(event) {
  if (xhr.readyState === 4 && xhr.status === 200 && Request A fired) {
  Make Request C;
  }
});

Я ищу решение без jQuery.

Answer 1

Я нашел решение, которое отвечает моим потребностям. Просто создайте другой объект XMLRequest и используйте их в операторе if.

let requestA = new XMLHttpRequest();
let requestB = new XMLHttpRequest();

if(requestA.readyState === 4){
//Run request C
}

Answer 2

Вы можете превратить ваш запрос в функцию, которая принимает функцию callback. Эта функция вызывается всякий раз, когда запрос завершается, и ваш код будет продолжаться с полученными данными.

function request(url, callback) {
  const xhr = new XMLHTTPRequest();
  xhr.addEventListener('readystatechange', function(event) {
    if (xhr.readyState === 4 && xhr.status === 200 && typeof callback === 'function') {
      callback(xhr.responseText);
    }
  });
  xhr.open('GET', url, true);
  xhr.send();
}

Это будет работать так с вложенными обратными вызовами и может быть перетасовано в любом порядке, который вы захотите.

request('request-a', function(dataA) {
  // Request A has finished here.
  // Now start request B.
  // dataA is the xhr.responseText value.

  request('request-b', function(dataB) {
    // Request B has finished here.
    // Now start request C.

    request('request-c', function(dataC) {
      // Request C has finished here.
    });

  });

});

Это самый простой способ сделать ваш запрос многоразовым и действовать, когда ваш запрос был завершен. Более современный подход заключается в использовании Fetch API , который является интерфейсом, основанным на обещаниях, который делает то же самое, что и XMLHTTPRequest. Обязательно проверьте это.

Answer 3

Используйте выборку , обещания и asyn c ожидайте , чтобы сделать вашу жизнь проще.

async function handlerA() { 
    log('Starting request A...')
    let responseA = await fetch(urls.a)
    let a = await responseA.text()
    log('Starting request C...')
    let responseC = await fetch(urls.c)
    let c = await responseC.text()
    log(a + c)
}

async function handlerB() { 
    log('Starting request B...')
    let responseB = await fetch(urls.b)
    let b = await responseB.text()
    log(b)
}

const urls = {
  a: 'https://httpbin.org/json',
  b: 'https://httpbin.org/robots.txt',
  c: 'https://httpbin.org/xml',
}

function log(str) {
  document.getElementById('output').innerText += `${str}\n`
}

document.getElementById('btnA').addEventListener('click', handlerA)
document.getElementById('btnB').addEventListener('click', handlerB)

<button id="btnA">Button A</button>
<button id="btnB">Button B</button>
<div id="output"></div>

Answer 4

Вы ищете систему для синхронного выполнения запросов xhr. Попробуйте вложенные обещания, когда следующий запрос будет сделан после разрешения предыдущего обещания.

let promiseA = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, 'foo');
});

promiseA.then((x) => {
    // Launch request B
}).then((x) => {
    // Launch request C
}).then((x) => {
    // Launch request D....
});

На это есть хорошее объяснение