如何在for循环中使用提取,等待结果然后进行console.log

时间:2018-06-24 18:31:38

标签: javascript fetch

我有这个问题:我想在一个for循环中进行多个提取调用。呼叫次数取决于用户输入(在我的示例中,我有3个)。我如何才能使其遍历所有提取请求,然后console.log记录掉话次数?

function 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? 如果您知道解决方案,请帮助我。

5 个答案:

答案 0 :(得分:2)

之后完成所有承诺之前,您不能调用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等待所有提取完成,然后将打印#。

答案 1 :(得分:0)

您可以尝试链接您的诺言,请尝试以下操作:

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

答案 2 :(得分:0)

您应该使用promise,Promise是创建promise时不一定知道的值的代理。它允许您将处理程序与异步操作的最终成功值或失败原因相关联。这样一来,异步方法就可以像同步方法一样返回值:与立即返回最终值不同,异步方法返回了在将来某个时刻提供值的承诺。

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

答案 3 :(得分:0)

您可以使用async await(async:函数,await:运算符)。等待操作员只需等待诺言得以解决。第一个承诺将得到解决,然后将移至另一个。另外,如果在任何提取中发现错误,它将立即捕获该错误。

答案 4 :(得分:0)

您可以将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')});