如何在其他const中使用axios响应?

Question

我在react js中是新的，我已经使用axios调用数据库值。我把响应放到一个函数和const中。我已经调用了函数，并想在其他const中使用函数内部的const，但我得到未定义的错误。

下面是我的js代码:

import axios from 'axios';
/*axios.get('http://localhost:3001/process')
.then((response) => {
console.log(response); // Hasil yang benar
return response;
});*/
const getValueAxios = async () => {
try {
const resGet = await axios.get('http://localhost:3001/process')
console.log(resGet)
} catch (error) {
console.log(error);
}
}
getValueAxios();
const eChart = {
series: [
{
name: "Sales",
data: [resGet[0].value, resGet[1].value, resGet[2].value, resGet[3].value, resGet[4].value, resGet[5].value, resGet[6].value, resGet[7].value, resGet[8].value, resGet[9].value, resGet[10].value, resGet[11].value],
color: "#fff",
},
],
options: {
chart: {
type: "bar",
width: "100%",
height: "auto",
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: "55%",
borderRadius: 5,
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: 1,
colors: ["transparent"],
},
grid: {
show: true,
borderColor: "#ccc",
strokeDashArray: 2,
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
labels: {
show: true,
align: "right",
minWidth: 0,
maxWidth: 160,
style: {
colors: [
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
],
},
},
},
yaxis: {
labels: {
show: true,
align: "right",
minWidth: 0,
maxWidth: 160,
style: {
colors: [
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
],
},
},
},
tooltip: {
y: {
formatter: function (val) {
return "Rp. " + val + " millions";
},
},
},
},
};
export default eChart;

它给我这样的错误"行24:14:'resGet'没有定义- no-undef"在这里:

[resGet[0].value, resGet[1].value, resGet[2].value, resGet[3].value, resGet[4].value, resGet[5].value, resGet[6].value, resGet[7].value, resGet[8].value, resGet[9].value, resGet[10].value, resGet[11].value]

Answer 1

我想导出一个函数getEChart()而不是eChart对象，因为eChart对象依赖于API响应。然后，您可以在任何需要eChart的地方调用此函数。

import axios from 'axios';
const getValueAxios = async () => {
try {
let resGet = await axios.get('http://localhost:3001/process')
console.log(resGet)
return resGet;
} catch (error) {
console.log(error);
}
}
const getEChart = async () => {
const resGet = await getValueAxios();
const eChart = {
series: [{
name: "Sales",
data: [resGet[0].value, resGet[1].value, resGet[2].value, resGet[3].value, resGet[4].value, resGet[5].value, resGet[6].value, resGet[7].value, resGet[8].value, resGet[9].value, resGet[10].value, resGet[11].value],
color: "#fff",
}, ],
options: {
chart: {
type: "bar",
width: "100%",
height: "auto",
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: "55%",
borderRadius: 5,
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: 1,
colors: ["transparent"],
},
grid: {
show: true,
borderColor: "#ccc",
strokeDashArray: 2,
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
labels: {
show: true,
align: "right",
minWidth: 0,
maxWidth: 160,
style: {
colors: [
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
],
},
},
},
yaxis: {
labels: {
show: true,
align: "right",
minWidth: 0,
maxWidth: 160,
style: {
colors: [
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
"#fff",
],
},
},
},
tooltip: {
y: {
formatter: function(val) {
return "Rp. " + val + " millions";
},
},
},
},
};
return eChart;
};
export default getEChart;