Как использовать fetch в цикле for, дождаться результатов, а затем console.log

Question

У меня есть эта проблема: я хочу сделать несколько вызовов выборки в цикле for.Количество звонков зависит от ввода пользователя (в моем примере у меня три).Как я могу сделать так, чтобы он перебрал все запросы на выборку, а затем console.log: количество отключенных вызовов?

функция getPosts () {

  let url = ["https://www.freecodecamp.org", "https://www.test.de/, http://www.test2.com"];
  let array = new Array;

  for (let i = 0; i < url.length; i++) {
    console.log(url[i]);
    fetch(url[i])
    .then(res => {return res.text(); })
    .then(res => {
            let reg = /\<meta name="description" content\=\"(.+?)\"/;
            res = res.match(reg);
            array.push(res);
            console.log(res);
          }
    )
    .catch(status, err => {return console.log(status, err);})
  }
  console.log (array.length);
  }

Это console.logs 0 вместо 3,потому что он не ждет, пока все обещания будут выполнены.Как я могу сделать это на console.log 3?Если вы знаете решение, пожалуйста, помогите мне.

Answer 1

Вы можете использовать async / await с try / catch:

async function getPosts(){
  let array = [];
  let url = ["https://www.freecodecamp.org", "https://www.test.de/", "http://www.test2.com"];
  let reg = /\<meta name="description" content\=\"(.+?)\"/;
  for (let i = 0; i < url.length; i++)   {
    console.log('fetching',url[i]);
    try {
      let p1 = await fetch(url[i]);
      let p2 = await p1.text();
      let res = p2.match(reg);
      array.push(res);
      console.log('adding',res);
    }
    catch (e) {
      console.error(e.message);
    }
  };
  console.log ('length',array.length);
};

getPosts().then(()=>{console.log('done')});

Answer 2

Вы можете использовать async await (async: function, await: operator).Ожидать оператора просто ждать решения обещания.Первое обещание будет выполнено, затем оно перейдет к другому.Кроме того, если он обнаружит ошибку в любом извлечении, он сразу же обнаружит ошибку.

Answer 3

Вы не можете вызвать console.log (array.length), пока после все обещания не выполнены. Так почему не как то так?

let url = ["https://www.freecodecamp.org", "https://www.test.de/, http://www.test2.com"];
  let array = new Array;
  var fetches = [];
  for (let i = 0; i < url.length; i++) {
    console.log(url[i]);
    fetches.push(
      fetch(url[i])
      .then(res => {return res.text(); })
      .then(res => {
            let reg = /\<meta name="description" content\=\"(.+?)\"/;
            res = res.match(reg);
            array.push(res);
            console.log(res);
          }
      )
      .catch(status, err => {return console.log(status, err);})
    );
  }
  Promise.all(fetches).then(function() {
    console.log (array.length);
  });
  }

Promise.all ожидает завершения всех выборок, затем печатает #.

Answer 4

Вы должны использовать обещание. Обещание - это прокси для значения, которое не обязательно известно при создании обещания. Это позволяет связать обработчики с конечным значением успеха или причиной сбоя асинхронного действия. Это позволяет асинхронным методам возвращать значения подобно синхронным методам: вместо немедленного возврата конечного значения асинхронный метод возвращает обещание предоставить значение в какой-то момент в будущем.

const fetch = require('node-fetch')
let url = ["https://www.freecodecamp.org", "https://www.test.de/, http://www.test2.com"];
let array = new Array;
function get(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(res => { return res.text(); })
      .then(res => {
        let reg = /\<meta name="description" content\=\"(.+?)\"/;
        res = res.match(reg);
        resolve(res)
        //console.log(res);
      }
      )
      .catch(err => { reject(err) })
  });
}
async function result() {
  for (let i = 0; i < url.length; i++) {
    const value = await get(url[i]);
    array.push(value)

  }
  console.log(array.length)
}

result()

==> array.length = 2,

Answer 5

Вы можете попробовать связать свои обещания, попробуйте следующее:

function getPosts(){

  let url = ["https://www.freecodecamp.org", "https://www.test.de/, http://www.test2.com"];
  let array = new Array;
  var promise = Promise.resolve();
  for (let i = 0; i < url.length; i++) {
    console.log(url[i]);
    promise = promise.then(fetch(url[i]))
    .then(res => {return res.text(); })
    .then(res => {
            let reg = /\<meta name="description" content\=\"(.+?)\"/;
            res = res.match(reg);
            array.push(res);
            console.log(res);
          }
    )
    .catch(status, err => {return console.log(status, err);})
  }
  promise.then(function(response){
    console.log (array.length);
  });
}