javascript - 如何从 axios Promise javascript 返回值

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 3 年前。

我试图用我从 javascript 进行的 axios api 调用返回一些列表，但是，我不明白如何 console.log() 结果并将其传递给我将来使用(尝试将它用于数据可视化)

这就是我所拥有的

const axios = require('axios');

var years = []
var totals = []
var rail = []
var bus = []
var para = []


const getTotal = async () => {
    const url="https://data.cityofchicago.org/resource/w8km-9pzd.json";

    var totals = []
    try {
        let res = await axios.get(url);

        for (i = 0; i < res.data.length; i++) {
            totals.push(res.data[i].total);
            years.push(res.data[i].year);
            rail.push(res.data[i].rail);
            bus.push(res.data[i].bus);
            para.push(res.data[i].para);
        }

    }catch(error) {
        console.log(error);
      }
      return(totals,years,rail,bus,para) 
}

//data = axiosDataFetch().bus;
console.log(getTotal())

^^^ 如何在此处打印总计而不是显示为未定义？我根据收到的一些答案编辑了代码，本质上我希望能够调用并使用从 API 获得的 5 个列表进行数据可视化。

Answer 1

在 axios 调用之前添加一个 await 关键字，然后使用 res 对象执行操作，而不是使用 .then 回调。

const axios = require('axios');

async function axiosDataFetch() {
    const url="https://data.cityofchicago.org/resource/w8km-9pzd.json";

    var totals = []
    let res = await axios.get(url);

    for (i = 0; i < res.data.length; i++) {
        totals += res.data[i].total;
    }

    console.log(res.result) 
}

axiosDataFetch();

Javascript 的设计核心是异步行为(例如，不知道 axios 进行的 http 调用何时返回，因此不能保证与您的程序同步)。

您可以阅读有关处理异步行为的许多方法的更多信息 here 。文章很长，但如果您能理解其内容，将来将为您节省无数时间。