Question

代码是关于什么的？

下面是我的应用程序中的代码块，代码到达网络，并获取网站的HTML数据进行剪贴。我用过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本身正在if方法的callHelpers语句中获取数据，该语句被多次调用。

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

如何等待所有数据都加载到bucket中，以便可以在前端显示它们。

您是否有可用的链接？

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

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

Answer 1

问题出在callHelpers中的fetchByQuery上-您只能调用一次，并确保以后提交存储桶。

在我可以看到的地方，解决此问题的许多方法之一是更新您的代码，使代码等待callHelpers完成其工作，然后提交bucket。

请注意，callHelpers工作的意思是，它要遍历所有页面并填充所有数据。

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

等待变量完全加载到javascript中

1 个答案: