保存变量上的异步/等待响应

Question

我正在尝试使用 async/await 和 try/catch 来理解异步调用。

在下面的示例中，如何将成功响应保存到可在其余代码中使用的变量？

const axios = require('axios');
const users = 'http://localhost:3000/users';

const asyncExample = async () =>{
    try {
        const data = await axios(users);
        console.log(data); //200
    }
    catch (err) {
        console.log(err);
    }
};

//Save response on a variable
const globalData = asyncExample(); 
console.log(globalData) //Promise { <pending> }

Answer 1

1：从

asyncExample

函数返回一些内容

const asyncExample = async () => {
  const result = await axios(users)

  return result
}

2：调用该函数并处理其返回值

Promise

:

;(async...

是一个 IFFE （立即调用函数表达式）。您需要它来执行顶级等待。这不是这个答案的一部分，所以不要混淆。

;(async () => {
  const users = await asyncExample()
  console.log(users)
})()

这就是为什么你应该这样处理它：

• 你不能做顶级的

  await

  （尽管有一个建议）；

  await

  必须存在于

  async

  函数中。

但是我必须指出，你原来的例子不需要

async/await

根本没有；由于

axios

已经返回

Promise

你可以简单地这样做：

const asyncExample = () => {
  return axios(users)
}

const users = await asyncExample()

Answer 2

try..catch

创建一个新的块作用域。使用

let

在

data

之前定义

try..catch

，而不是

const

，

return

data

来自

asyncExample

函数调用

(async() => {

  const users = 123;

  const asyncExample = async() => {
    let data;
    try {
      data = await Promise.resolve(users);
    } catch (err) {
      console.log(err);
    }
    return data;
  };

  //Save response on a variable
  const globalData = await asyncExample();
  console.log(globalData);
  // return globalData;
})();

Answer 3

我和你有同样的问题并找到了这篇文章。经过两天的尝试，我终于找到了一个简单的解决方案。
根据JS的文档，

async

函数只会返回一个

Promise

对象而不是值。要访问

Promise

的响应，您必须使用

.then()

方法或

await

，它可以返回 Promise 的结果对象而不是 Promise 本身。
要从

await

更改变量，您可以访问并更改要在异步函数中分配的变量，而不是从中返回。

//Save response on a variable
var globalData;
const asyncExample = async () =>{
    try {
        const data = await axios(users);
        globalData = data; // this will change globalData
        console.log(data); //200
    }
    catch (err) {
        console.log(err);
    }
};
asyncExample();

但是如果你这样做，你可能会得到一个未定义的输出。

asyncExample();
console.log(globalData) //undefined

由于

asyncExample()

是一个

async

函数，当调用

console.log

时，

asyncExample()

还没有完成，所以

globalData

仍然没有被赋值。以下代码将在

console.log

完成后调用

asyncExample()

。

const show = async () => {
    await asyncExample();
    console.log(globalData);
}
show();

Answer 4

因为事件是异步发生的，所以您需要绑定回调/承诺。我假设它会返回一个承诺。

const axios = require('axios');
const users = 'http://localhost:3000/users';

const asyncExample = async () =>{
    try {
        const data = await axios(users);
        console.log(data); //200
    }
    catch (err) {
        console.log(err);
    }
};

//Save response on a variable
const globalData = asyncExample().then( (success, err) => {
  if (err) { console.error(err); }
  console.log(success)
}

Answer 5

只需使用回调/promise（级联编程）：

axios(users).then(function(response) {
    const globalData = response;
    console.log(globalData) 
});