如何将axios返回的json保存到变量中？

Question

我想把axios返回的JSON保存到一个变量中。目前，我只能看到以下代码中的控制台输出(response.data):

function status() {
  const url = "https://api.com";
  axios.get(url).then(function (response) {
    console.log(response.data);
  });
}
status(); // console.logs object successfully

如果我只是将响应数据(response.data)赋值给一个变量而不是打印出来，那么它就会保持空白({})。 我想要做的事情类似于：

let data = {};
function status() {
  const url = "https://api.com";
  axios.get(url).then(function (response) {
    data = response.data;
  });
}
status();
console.log(data); // {}
// I want to manipulate and use the properties of data in subsequent code here

请问我该如何完成这个任务？非常感谢您的帮助。

- kylel9506

---

这个回答解决了你的问题吗？如何从异步调用中返回响应？ - Lewis

不熟悉axios，但您尝试过使用async/await吗？可能是因为console.log()在axios实际返回之前触发了。 - Matt

此外，让status()函数返回数据可能会更好。为此，请在函数内弹出数据变量，并在axios调用完成后将其返回。 - Matt

Answer 1

axios.get(url) 函数返回一个 Promise。您可以使用以下方式使用 async/await。

 async function status() {
  const url = "https://api.com";
  let response = await axios.get(url);
  return response.data;
}

status().then((data) => console.log(data));

- Rahul Bhobe

---

谢谢，但是当我尝试这样做时出现了一个错误："SyntaxError: await is only valid in async function"。 - kylel9506

@kylel9506 - 你需要将函数标记为 async，像这样 async function status() { ... }。 - Rahul Bhobe

Answer 2

Axios执行异步操作，任何异步操作总是在执行所有同步操作之后执行。在这里阅读有关JavaScript执行的信息：https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec 简而言之，在末尾的console.log语句是同步操作，它将始终在axios(...).then回调之前执行。

然而，JavaScript现在有一个新特性，叫做async...await，允许您像普通的JavaScript语句一样按顺序运行Promises。但请注意，仍然存在异步执行的情况。

async function status() {
  const url = "...";
  consr resp = await axios.get(url);
  return resp.data;
}

status().then(data => console.log(data));

在常规的JavaScript中，这等同于这个：

function status() {
  const url = "...";
  return axios.get(url).then((resp) => {
    return resp.data;
  });
}

status().then(data => console.log(data));

编辑：为了在包外存储访问数据，请将所有内容包装在自执行的异步函数中，并执行以下操作：

(async () => {
  let data;
  function status() {
    const url = "...";
    return axios.get(url).then((resp) => {
      return resp.data;
    });
  }
  data = await status();
  console.log(data);
})();

- Sachin Singh

---

谢谢。不过这并不是我要找的。我该如何在status.then()之后将数据保存为变量，就像这样：let obj = {}; status().then((data) => (obj = data)); console.log(obj); - kylel9506

只有异步操作完成后才会保存...您只能在“then”回调函数内部访问“data”，而不能像您的情况一样在外部访问它。 - Sachin Singh

然而，您可以将代码包装在自执行异步函数中，并在“status”函数上使用await来解决问题。请检查我对答案的编辑。 - Sachin Singh

Answer 3

由于调用API是异步的（需要一些时间才能返回答案），您应该在继续执行代码之前等待这个答案。幸运的是，js有一个很好的功能，可以使用漂亮的语法来实现这一点。它通常被称为async/await 您只需将代码包装在初始调用的异步函数中。然后将状态函数更新为异步函数，以等待axios响应，因此等待状态函数完成填充数据变量。

(async () => {
  let data = {};
  async function status() {
    const url = "https://api.com";
    const response = await axios.get(url);
    data = response.data;
  }
  await status();
  console.log(data); // {...response.data}
  // Now you can manipulate and use the properties of data in subsequent code here
})()

这里有一个可用的 example 链接。

- Andres Abadia

Answer 4

axios.get(url) 是一个异步方法，这意味着它不会返回结果，而是会返回一个 Promise（一个表示“我没有结果，但是最终我会得到它”的对象）。要获得结果，您必须等待它。

您有多种选择，第一种是使用 .then()（不是很推荐）。

axios.get(url).then((result) => {
  console.log(result);
});

第二个需要使用async/await。Async用于定义异步方法，await用于等待异步方法。你只能在异步方法中使用await（因为你必须等待）。

const result = await axios.get(url);
console.log(result);

然而，正如上面所说，如果您在顶层模块函数中（例如，如果您不在方法中，只是在您的.js文件中），您可以像这样使用立即调用的函数：

(async () => {
  const result = await axios.get(url);
  console.log(result);
)();

Et voilà !

- Cesar Wibaut