从 axios 存储数据以供以后通过 util 函数使用答案

【问题标题】：Storing data from axios to use it later via util functions从 axios 存储数据以供以后通过 util 函数使用
【发布时间】：2021-06-30 01:03:19
【问题描述】：

我有一个简单的 axios GET 调用，我想存储它以供某些 util 函数以后使用。由于这是一个 React 应用程序，它可以存储在内存（浏览器）中还是存储在目录中的文件中？

const data = [];

const getData = (logName) => {
  if (logName === '') {
    alert('Please enter the name of your log!');
  } else {
    axios({
      method: 'GET',
      url: `http://xxx-yyy-zzz/debugger/RTS/${logName}/logs`,
    })
      .then((res) => {
        alert('Successfully Imported');
        return data.push(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

const askPrice = () => {
  return data.map((result) => result.request.requestContext.mpcBidRequest.askPrice);
};

这是我目前拥有的，以前 data 只是 import data from '../data/x.json'; 但现在我想调用请求并将 import data from '../data/x.json'; 替换为 GET 响应返回的数据。

函数...

const askPrice = () => {
  return data.map((result) => result.request.requestContext.mpcBidRequest.askPrice);
};

稍后将使用（在调用 API 之后）映射 JSON 对象数组以将结果输出到 UI。我的应用使用import data from '../data/x.json'; 运行良好，但现在我想获取用户输入来生成数据。

【问题讨论】：

你可以导入一个函数或者promise来获取数据，但是如果是异步的，那么导入的时候json就不会存在了。
您是否需要在特定组件中使用data，或者它必须可以从多个组件的全局状态中访问？您是否只想在应用加载时、组件加载后或特定用户操作后提取一次数据？
我想在用户输入触发表单并单击按钮后获取数据。然后一旦加载数据......用户将单击按钮，这些按钮将触发 util 函数以从 JSON 中获取相关数据。

标签： javascript reactjs axios

【解决方案1】：

我已经设法将我需要的内容存储到 let 中并进行了测试……一切正常。

let data = [];

async function getData(filter, logName) {
  if (logName === '') {
    alert('Please enter the name of your log!');
  } else {
    axios({
      method: 'GET',
      url: `http://xxx/debugger/${filter}/${logName}/logs`,
    })
      .then((res) => {
        if (res.data.length === 0) {
          console.log(res.data);
          alert('Your query returned empty JSON!');
        } else {
          console.log(res.data);
          data = res.data;
        }

        return res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  }
}

【讨论】：