I have a scenario in which I make various Ajax calls to a WebApi and with the return I load controls from an application.
I would like to create a single method to call the API, which would receive a parameter with the link, for example 'api / CategoryCategory /'. In this method I would like to return if error occurred and the list (json) retrieved.
I created the following method for the AJAX call:
const URL_BASE = "http://10.1.1.121/App/";
function executaChamadaAPI(URL_API) {
const URL_SERVICO = URL_BASE + URL_API
let resultado = {
erro: "NOK",
lista: {}
};
$.get(URL_SERVICO, function (data) {
data = $.parseJSON(data);
})
.done(function (data) {
resultado.erro = "OK";
resultado.lista = $.parseJSON(data);;
})
.fail(function () {
resultado.erro = "NOK";
})
.always(function () {
return resultado;
});
}
I would like to create a function for each control I have to load: categories, users, and so on. calling the generic method to execute AJAXexecutaChamadaAPI, passing the path, something like this:
function carregaCategorias{
var res = executaChamadaAPI('api/ListaCategorias/');
//Aguardar a execução e retorno do método executaChamadaAPI para posteriormente usar o retorno
if (res.erro == 'OK'){
res.lista.forEach(function (o, index) {
let idCategoria = o.id;
var html = '<p>' + idCategoria + '</p>';
$("#result").prepend(html);
});
}
else{
alert('erro ao executar executaChamadaAPI' );
}
}
I even did the following, but I do not know if it's the best:
const URL_BASE = "http://172.16.106.87/App/";
function carregaCategorias(res) {
if (res.erro.toUpperCase() == "OK") {
res.lista.forEach(function (o, index) {
let srcImg = URL_BASE + o.PathImagem;
let idCategoria = o.id;
var html = '<p>' + idCategoria + '</p>';
console.log(html);
$("#result").prepend(html);
});
}
else
alert('errou rude');
}
function executaChamadaAPI(funcRetorno, URL_API) {
const URL_SERVICO = URL_BASE + URL_API
console.log('Entrou executaChamadaAPI ' + URL_SERVICO);
let resultado = {
erro: "NOK",
lista: {}
};
$.get(URL_SERVICO, function (data) {
data = $.parseJSON(data);
})
.done(function (data) {
//console.log(data);
resultado.erro = "OK";
resultado.lista = $.parseJSON(data);;
console.log("Success executaChamadaAPI " + resultado.lista.length);
})
.fail(function () {
console.log("error executaChamadaAPI");
resultado.erro = "NOK";
})
.always(function () {
console.log("Complete executaChamadaAPI ");
funcRetorno(resultado); //chama uma função de acordo com parâmetro passado
return resultado;
});
}
executaChamadaAPI(carregaCategorias,'api/ListaCategorias/')
Or maybe the best would be for each function to call and handle the AJAX request?