Как вернуть данные из класса? В приложении на react часто используются аякс запросы, для их выполнения юзаю либу axios.
Ранее ООП на JS совсем не использовал.
Для сокращения кода вынес все запросы в отдельный класс (ApiConnect), который подключаю через import RequestToApi from '../ApiConnect.js';
Сами запросы выполняются, и console.log данные выводит, но вопрос в том, как эти данные получить обратно в компонент?
Вот пример класса:import axios from 'axios';
export default class RequestToApi {
constructor(url, data) {
this.url = url;
this.data = data;
this.post = this.post.bind(this);
this.get = this.get.bind(this);
}
post(){
axios.post(this.url, JSON.stringify(this.data))
.then(function (response) {
//console.log(response);
return response;
})
.catch(function (error) {
return error;
});
}
get(){
axios.get(this.url, JSON.stringify(this.data))
.then(function (response) {
//console.log(response);
return response;
})
.catch(function (error) {
return error;
});
}
}
вот пример обращения:let UpdateTask = new RequestToApi(URL, data);
UpdateTask.post();
Как правильно вернуть данные из класса?
Как вернуть данные из класса? В приложении на react часто используются аякс запросы, для их выполнения юзаю либу axios.
Ранее ООП на JS совсем не использовал.
Для сокращения кода вынес все запросы в отдельный класс (ApiConnect), который подключаю через import RequestToApi from '../ApiConnect.js';
Сами запросы выполняются, и console.log данные выводит, но вопрос в том, как эти данные получить обратно в компонент?
Вот пример класса:import axios from 'axios';
export default class RequestToApi {
constructor(url, data) {
this.url = url;
this.data = data;
this.post = this.post.bind(this);
this.get = this.get.bind(this);
}
post(){
axios.post(this.url, JSON.stringify(this.data))
.then(function (response) {
//console.log(response);
return response;
})
.catch(function (error) {
return error;
});
}
get(){
axios.get(this.url, JSON.stringify(this.data))
.then(function (response) {
//console.log(response);
return response;
})
.catch(function (error) {
return error;
});
}
}
вот пример обращения:let UpdateTask = new RequestToApi(URL, data);
UpdateTask.post();
Как правильно вернуть данные из класса?
Ранее ООП на JS совсем не использовал.
Для сокращения кода вынес все запросы в отдельный класс (ApiConnect), который подключаю через import RequestToApi from '../ApiConnect.js';
Сами запросы выполняются, и console.log данные выводит, но вопрос в том, как эти данные получить обратно в компонент?
Вот пример класса:import axios from 'axios';
export default class RequestToApi {
constructor(url, data) {
this.url = url;
this.data = data;
this.post = this.post.bind(this);
this.get = this.get.bind(this);
}
post(){
axios.post(this.url, JSON.stringify(this.data))
.then(function (response) {
//console.log(response);
return response;
})
.catch(function (error) {
return error;
});
}
get(){
axios.get(this.url, JSON.stringify(this.data))
.then(function (response) {
//console.log(response);
return response;
})
.catch(function (error) {
return error;
});
}
}
вот пример обращения:let UpdateTask = new RequestToApi(URL, data);
UpdateTask.post();
Как правильно вернуть данные из класса?
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки в течение 1 года
Быстрое выполнение от 2 часов
Проверка работы на плагиат
Поможем написать учебную работу
Для возврата данных из класса во внешний компонент, можно воспользоваться колбэками или промисами.
Пример с использованием промисов:
import axios from 'axios';export default class RequestToApi {
constructor(url, data) {
this.url = url;
this.data = data;
}
post(){
return new Promise((resolve, reject) => {
axios.post(this.url, JSON.stringify(this.data))
.then(function (response) {
resolve(response);
})
.catch(function (error) {
reject(error);
});
});
}
get(){
return new Promise((resolve, reject) => {
axios.get(this.url, JSON.stringify(this.data))
.then(function (response) {
resolve(response);
})
.catch(function (error) {
reject(error);
});
});
}
}
Использование класса с промисами:
let UpdateTask = new RequestToApi(URL, data);UpdateTask.post().then(response => {
console.log(response);
}).catch(error => {
console.error(error);
});
Таким образом, данные будут доступны в вашем компоненте после выполнения запроса через метод then при успешном выполнении запроса или catch при возникновении ошибки.