等待变量在 javascript 中完全加载

Question

代码是关于什么的？

以下是我的应用程序中的代码块，其中代码到达网络并获取网站的 HTML 数据以进行 scraping。我使用https://cors-anywhere.herokuapp.com 获取 HTML 数据，并使用 Cheerio 从 HTML 块中抓取所需数据。

import axios from "axios";
import cheerio from "cheerio";
import {
  getJobTitle,
  getOrgImage,
  getOrgName,
  paginate,
  getLocation
} from "./Helpers";

let jobTitles = [];
let imgs = [];
let orgsNames = [];
let locations = [];
let forState = [];
let bucket = [];

const state = {
  jobs: []
};

const getters = {
  meroJobs: state => state.jobs
};

async function getFromNextPage(status) {
  if (status !== null) {
    let res = await axios.get(
      "https://cors-anywhere.herokuapp.com/https://examle.com" + status
    );
    let chunk = cheerio.load(res.data);
    callHelpers(chunk);
  }
  return;
}

const callHelpers = html => {
  if (html !== null) {
    jobTitles = jobTitles.concat(getJobTitle(html));
    imgs = imgs.concat(getOrgImage(html));

    orgsNames = orgsNames.concat(getOrgName(html));

    locations = locations.concat(getLocation(html));

    let status = paginate(html);

    getFromNextPage(status);
    forState = makeObject(jobTitles, imgs, orgsNames, locations);
    bucket = bucket.concat(forState);

    console.log(bucket.length);
  }
  return;
};

const makeObject = (jobs, img, org, locations) => {
  let mjobs = [];
  for (let i = 0; i < jobs.length; i++) {
    mjobs.push({
      title: jobs[i],
      img: "https://example.com" + img[i],
      org: org[i],
      location: locations[i]
    });
  }
  return mjobs;
};

const actions = {
  async fetchByQuery({
    commit
  }, param) {
    console.log("clicked");
    console.log(param);
    let response = await axios.get(
      "https://cors-anywhere.herokuapp.com/https://example.com/search/?q=" +
      param
    );
    console.log("Response got");
    let html = cheerio.load(response.data);

    callHelpers(html);

    commit("setMeroJobs", bucket);
  }
};

const mutations = {
  setMeroJobs: (state, jobs) => (state.jobs = jobs)
};

export default {
  state,
  getters,
  actions,
  mutations
};

这段代码有效吗？

是的，代码运行良好。它确实会获取 HTML 数据并抓取所需的数据。

那是什么问题？

在上面的代码块中，我们可以看到我正在将变量bucket 的数据加载到要在前端显示的状态。变量bucket 本身在被多次调用的callHelpers 方法的if 语句中获取数据。

虽然我已经制作了一种方法来检查分页并从每个页面获取数据并将数据加载到变量bucket。但是我只从第一次调用/迭代中获取数据[仅来自第一页的数据]。

如何等到所有数据都加载到bucket 中才能在前端显示。

您有有效的链接吗？

我正在本地机器上运行应用程序，但这是codesandbox中我的应用程序的副本

输入teacher无分页1页4条数据，manager分页3页18条数据

Answer 1

问题在于fetchByQuery 中的callHelpers - 您只需调用一次并确保之后提交存储桶。

在我看到的解决这个问题的许多方法之一是更新你的代码，它应该等到callHelpers 完成它的工作，然后提交bucket。

请注意，我所说的callHelpers 工作是指遍历所有页面并填充所有数据。

https://codesandbox.io/s/reverent-butterfly-vs9ek?file=/src/store/modules/MeroJob.js