将来自 Axios 调用的数据放入 Javascript 对象答案

【问题标题】：Putting data from Axios call into Javascript Object将来自 Axios 调用的数据放入 Javascript 对象
【发布时间】：2021-10-25 06:32:41
【问题描述】：

我希望 Axios 调用的结果（console.log 所在的位置）进入它下面的对象（location_geo_point: 所在的位置）。我尝试将 getCoords 函数放在 createElasticSearchJob 函数之外，并将结果保存在 state 中。但是这不起作用，因为我将 {location} 传递到 url 并且它还没有被声明。

function createElasticSearchJob(rowData, getCoords) {
  function getCoords() {
    return axios
      .get(
        `http://nominatim.openstreetmap.org/search?q=${location}&format=json&polygon=1&addressdetails=1`
      )
      .then((res) => {
        console.log(res.data[0]);
      });
  }
  const {
    country,
    hiring_company: {
      name: companyName
    },
    id,
    location,
    name,
    posted_time,
    posted_time_friendly,
    snippet,
    state: locationState,
    url,
  } = rowData;

  return {
    job_id: id,
    job_title: name,
    location: location,
    num_days_since_posted: posted_time_friendly,
    job_date_posted: posted_time,
    job_date_posted_date_value: posted_time,
    job_url: url,
    job_title_full_from_desc: name,
    job_company_name: companyName,
    job_location: location,
    job_desc_text: snippet,
    job_desc_html: snippet,
    job_source: "ZipRecruiter API",
    job_years_of_experience: null,
    DOC_HASH: id,
    location_geo_point: getCoords(),
  };
}

【问题讨论】：

标签： javascript reactjs json object axios

【解决方案1】：

您想要做的事情很简单，您可以使用async/await 语法或仅使用闭包。试试这个：

async function createElasticSearchJob(rowData, getCoords) {
  async function getCoords() {
    const { data } = await axios.get('http://nominatim.openstreetmap.org/search?q=${location}&format=json&polygon=1&addressdetails=1');
    return Promise.resolve(data[0]);
    // It's better to wrap this axios call inside a try/catch block and handle the exceptions.
  }
  const {
    country,
    hiring_company: {
      name: companyName
    },
    id,
    location,
    name,
    posted_time,
    posted_time_friendly,
    snippet,
    state: locationState,
    url,
  } = rowData;

  return {
    job_id: id,
    job_title: name,
    location: location,
    num_days_since_posted: posted_time_friendly,
    job_date_posted: posted_time,
    job_date_posted_date_value: posted_time,
    job_url: url,
    job_title_full_from_desc: name,
    job_company_name: companyName,
    job_location: location,
    job_desc_text: snippet,
    job_desc_html: snippet,
    job_source: "ZipRecruiter API",
    job_years_of_experience: null,
    DOC_HASH: id,
    location_geo_point: await getCoords(location), // don't forget to pass the parameters
  };
}

【讨论】：

【解决方案2】：

出现问题是因为 location 在 getCoords 方法中未定义。可以通过以下代码解决：

function createElasticSearchJob(rowData, getCoords) {
  function getCoords() {
    return axios
      .get(
        `http://nominatim.openstreetmap.org/search?q=${location}&format=json&polygon=1&addressdetails=1`
      )
      .then((res) => {
        console.log(res.data[0]);
      });
  }
  const {
    country,
    hiring_company: {
      name: companyName
    },
    id,
    location,
    name,
    posted_time,
    posted_time_friendly,
    snippet,
    state: locationState,
    url,
  } = rowData;

  return {
    job_id: id,
    job_title: name,
    location: location,
    num_days_since_posted: posted_time_friendly,
    job_date_posted: posted_time,
    job_date_posted_date_value: posted_time,
    job_url: url,
    job_title_full_from_desc: name,
    job_company_name: companyName,
    job_location: location,
    job_desc_text: snippet,
    job_desc_html: snippet,
    job_source: "ZipRecruiter API",
    job_years_of_experience: null,
    DOC_HASH: id,
    location_geo_point: getCoords(location),
  };
}

【讨论】：