Почему я получаю ошибку 500 от сервера при запросе данных для построения графика?
У меня есть компонент v-customQA где прописана вся логика для запроса данных с сервера. После заполнения всех полей делается запрос на получение и отрисовку данных. Вылетает ошибка 500, не могу понять, что я не так делаю. Отдельный компонент home, в котором с помощью табов я переключаю вкладки управляет логикой переключения. Компонент v-header-forms , в нем прописана логика всех полей( select, input, checkbox ). Через mapstate я обращаюсь к модулю в хранилище ( к данным ). Вот код:
error Error: Request failed with status code 500
at createError (createError.js?2d83:16)
at settle (settle.js?467f:17)
at XMLHttpRequest.handleLoad (xhr.js?b50d:62)
home
<template>
<v-header-forms />
</div>
<!-- Tabs -->
<div class="container with-nav" >
<ul class="tab-nav">
<li class="tab-nav-item">
<a
@mouseover="active = true"
@mouseleave="active = false"
@click="changeTab(1)"
class="tab-link"
:class="{active: activeTab === 1}"
>Recommended</a>
</li>
<li class="tab-nav-item">
<a
@click="changeTab(3)"
class="tab-link"
:class="{active: activeTab === 3}"
>Custom QA</a>
</li>
</ul>
<div
class="tab-content">
<div class="tab-item" v-if="activeTab === 1 && $store.state.calculator.selectedUnderlying && $store.state.calculator.selectedMaturity && $store.state.calculator.coinAmount">
<v-recommended></v-recommended>
</div>
<div class="tab-item" v-if="activeTab === 2">
<v-customPro></v-customPro>
</div>
<div class="tab-item" v-if="activeTab === 3">
<vCustomQa></vCustomQa>
</div>
</template>
<script>
data() {
return {
active: false,
activeTab: 1,
langList: ["RU", "EN"],
};
},
methods: {
changeTab(value) {
console.log('setting', value)
this.activeTab = value
this.$store.commit('calculator/clearForm')
}
}
};
</script>
v-customQA
<vSelect
v-model="selectedDirection"
:options="directionOptions"
@input="setDirection"
>
</vSelect>
<vLineChart2
v-if="chartData"
class="text-left chart-v min-w-2/3 w-2/3 mt-5"
:dataset="chartData"
/>
<input
class="input border border-gray-400 rounded px-3 py-3 pb-2 "
v-model="max_slippage"
name="inputSlipage"
id="slipage"
type="number"
/>
<script>
computed: {
requestParams() {
return {
main_direction: this.selectedDirection,
fut_hedge_flag: this.convertBooleanToString(this.subDirectionFlag),
sub_direction_flag: this.convertBooleanToString(this.saveDirection),
main_range: 0,
sub_range: [...this.expectedMaxPrice],
max_slippage: this.max_slippage,
};
},
markSliderCoin() {
switch (this.selectedCoin) {
case "BTC":
return this.markSlider;
case "ETH":
return this.markSliderEth;
default:
return null;
}
},
...mapGetters(["fullDataList", "tableList"]),
...mapState({
selectedCoin: (state) => state.calculator.selectedUnderlying,
selectedDate: (state) => state.calculator.selectedMaturity,
coinAmount: (state) => state.calculator.coinAmount,
}),
},
methods: {
...mapActions([
"getMaturity_actions",
"getStrikes_actions",
"getQaStructs_actions",
"sendOrder",
]),
async getMaturity(underlying) {
this.maturityList = await this.getMaturity_actions(underlying);
const result = await this.getStrikes_actions(this.selectedCoin); //BTC-ETH
console.log(".main_value", result[this.selectedCoin].main_value);
console.log("sub_value", result[this.selectedCoin].sub_value);
this.minSlider = result[this.selectedCoin].min;
this.maxSlider = result[this.selectedCoin].max;
this.stepSlider = result[this.selectedCoin].step;
this.expectedMinPrice = [...result[this.selectedCoin].main_value];
this.defolt_expectedMinPrice = [...result[this.selectedCoin].main_value];
this.expectedMaxPrice = [...result[this.selectedCoin].sub_value];
this.defolt_expectedMaxPrice = [...result[this.selectedCoin].sub_value];
/* this.setupSliderLabels(); */
this.selectedDate = null;
this.coinAmount = 0;
this.chartData = null;
this.max_slippage = null;
this.tableData = null;
this.selectedDirection = null;
this.futHedgeFlag_top = false;
this.futHedgeFlag_down = false;
this.saveDirection = false;
this.subDirectionFlag = false;
this.markSlider = (v) => !(v % 25000);
this.markSliderEth = (v) => !(v % 1000);
},
setupSliderLabels() {
this.sliderLabels = [];
const labelsAmount = 15;
const labelStep = Math.ceil(this.maxSlider / labelsAmount / 100) * 100;
let currentLabel = 0;
for (let index = 0; index < labelsAmount; index++) {
this.sliderLabels.push(currentLabel);
currentLabel = currentLabel + labelStep;
}
},
setMaturity(event) {
this.$store.commit("setMaturity_mutations", event);
},
convertBooleanToString(flag) {
return (
String(flag)
.charAt(0)
.toUpperCase() + String(flag).slice(1)
);
},
async setDirection(value) {
console.log("setDirection");
this.selectedDirection = value;
let shit = 0;
clearInterval(this.intervalTimerId);
this.intervalTimerId = setInterval(async () => {
try {
const result = await this.$store.dispatch(
"getQaStructs_actions",
this.requestParams
);
console.log("result-setDirection", result);
if (result) {
shit++;
if (shit === 1) {
this.chartData = result[0].chart;
}
this.tableData = result[0].table;
if (!this.max_slippage) {
this.max_slippage = result[0].max_slippage;
}
console.log("max_slippage", this.max_slippage);
console.log("chartData", this.chartData);
}
} catch (error) {
console.log("catch", error);
}
}, 2000);
/* console.log("tableData", this.tableData); */
},
setAmount(selectedDirection) {
this.$store.commit("setAmount_mutations", selectedDirection);
},
async FieldsCheck() {
if (
this.selectedCoin &&
this.selectedDate &&
this.coinAmount != 0 &&
this.selectedDirection
) {
this.setDirection();
}
},
changeMinPrice() {
this.futHedgeFlag_top = false;
},
changeMaxPrice() {
this.futHedgeFlag_down = false;
},
},
mounted() {
console.log(this.$store);
},
</script>
calculator.js (модуль sotre.js)
export default {
namespaced: true,
state: {
selectedUnderlying: null,
selectedMaturity: null,
coinAmount: 0,
hedgeFunding: false,
maturityList: {
btc: [],
eth: []
}
},
mutations: {
setUnderlying(state, value) {
state.selectedUnderlying = value
},
setMaturity(state, value) {
state.selectedMaturity = value
},
setCoinAmount(state, value) {
state.coinAmount = value
},
setHedgeFunding(state, value) {
state.hedgeFunding = value
},
clearForm(state) {
state.selectedUnderlying = null
state.selectedMaturity = null
state.coinAmount = 0
state.hedgeFunding = false
}
}
}
store.js
actions: {
async getStrikes_actions(context) {
try {
const url = "/strikes";
const options = {
params: {
currency: context.rootState.calculator.selectedUnderlying,
},
};
const response = await axios.get(url, options);
return response.data.data;
} catch (error) {
return false;
}
},
async getQaStructs_actions(context, params) {
console.log("params", params);
try {
const url = `/qaStructs?currency=${context.rootState.calculator.selectedUnderlying}&maturity=${context.rootState.calculator.selectedMaturity}&amount=${context.rootState.calculator.coinAmount}&fut_hedge_flag=${params.fut_hedge_flag}&main_direction=${params.main_direction}&main_range=${params.main_range}&sub_direction_flag=${params.sub_direction_flag}&sub_range=${params.sub_range}&max_slippage=${params.max_slippage}`;
console.log("url",url);
let response = await axios.get(url);
console.log("response",response);
return response.data.data;
}
catch (error) {
console.log("error",error);
return false;
}
},
},
getters: {
maturityList: (state) => state.maturityList,
fullDataList: (state) => state.fullDataList,
underlyingChoice: (state) => state.underlying,
tableList: (state) => state.key,
maturity: (state) => state.maturity,
},
modules: {
auth,
calculator
},