Преобразовать вложенный AJAX вызов в последовательные обещания - PullRequest
Новая
       6

Преобразовать вложенный AJAX вызов в последовательные обещания

0 голосов
/ 24 марта 2020

У меня есть код, который успешно выполняет AJAX последовательных вызовов (грубый тест на задержку inte rnet для моих сотрудников): 

const start = new Date().getTime();
const testUrl = "our server URL";
const start = new Date().getTime();
$.ajax(testUrl + '?delay=0.0&length=100').done(function(){
  $.ajax(testUrl + '?delay=0.1&length=1000').done(function(){
    $.ajax(testUrl + '?delay=0.2&length=10000').done(function(){
      $.ajax(testUrl + '?delay=0.1&length=100000').done(function(){
        $.ajax(testUrl + '?delay=0.2&length=10000').done(function(){
          $.ajax(testUrl + '?delay=0.1&length=1000').done(function(){
            $.ajax(testUrl + '?delay=0.0&length=100').done(function(){
              $.ajax(testUrl + '?delay=0.1&length=10').done(function(){
                const end = new Date().getTime();
                internetTestTime = end - start;
                console.log('Your internet test time: ' + internetTestTime + 'ms')
                })
            })
          })
        })            
      })
    })
  })
});

Я хотел бы переключить это на использование Promises, которые выполняются по порядку. Вот прогресс на данный момент: 

const start = new Date().getTime();
const testSuiteInputs = [
    {delay: 0.5, length: 100},
    {delay: 0.4, length: 500},
    // more tests here
];
let testSequence = Promise.resolve();
testSuiteInputs.forEach(testSuiteInput => {
    // ? something goes here...
});
testSequence.then(() => {
    const end = new Date().getTime();
    internetTestTime = end - start;
    console.log('Your internet test time: ' + internetTestTime + 'ms')
});

Что мне нужно поставить на ? выше, чтобы эти Обещания выполнялись последовательно?

1 Ответ

1 голос
/ 24 марта 2020

Ну, самый простой способ - переключить ваш .forEach() l oop на обычный for l oop внутри функции async и затем использовать await: 

async function run() {
    const start = new Date().getTime();
    const testSuiteInputs = [
        {delay: 0.5, length: 100},
        {delay: 0.4, length: 500},
        // more tests here
    ];
    for (let item of testSuiteInputs) {
        let url = `${testUrl}?delay=${item.delay}&length=${item.length}`;
        let result = await $.ajax(url);
        // process result here
    }
}

run().then(finalResult => {
    console.log("all done");
}).catch(err => {
    console.log(err);
});

Чтобы сделать это без использования async/await, общий шаблон проектирования для упорядочения асинхронного доступа к массиву должен использовать .reduce(), когда вы просто объединяете обещания вместе: 

const start = new Date().getTime();
const testSuiteInputs = [
    {delay: 0.5, length: 100},
    {delay: 0.4, length: 500},
    // more tests here
];

testSuiteInputs.reduce((p, item) => {
    return p.then(() => {
        // when previous ajax call finished, start the next one
        let url = `${testUrl}?delay=${item.delay}&length=${item.length}`;
        return $.ajax(url).then(result => {
            // process individual result here
        });
    });
}, Promise.resolve()).then(finalResult => {
    console.log("all done");
}).catch(err => {
    console.log(err);
});;
...