Tengo un frontend hecho con vite/react
, en esta parte de mi código quiero enviarle a una Api hecha en .Net mediante POST los datos.
Parte de mi componente:
const dispatch = useDispatch();
const externalId = useSelector((state: RootState) => state.consumer.externalId);
const governmentId = useSelector((state: RootState) => state.consumer.governmentId);
const mail = useSelector((state: RootState) => state.consumer.mail);
const name = useSelector((state: RootState) => state.consumer.name);
const phoneNumber = useSelector((state: RootState) => state.consumer.phoneNumber);
const pacMandateId = useSelector((state: RootState) => state.consumer.pacMandateId);
const defaultAgent = useSelector((state: RootState) => state.consumer.defaultAgent);
const sendMail = useSelector((state: RootState) => state.consumer.sendMail);
const agentPhoneNumber = useSelector((state: RootState) => state.consumer.agentPhoneNumber);
const silencedUntil = useSelector((state: RootState) => state.consumer.silencedUntil);
const rfc = useSelector((state: RootState) => state.consumer.rfc);
const taxZipCode = useSelector((state: RootState) => state.consumer.taxZipCode);
const fiscalRegime = useSelector((state: RootState) => state.consumer.fiscalRegime);
const defaultReceiptType = useSelector((state: RootState) => state.consumer.defaultReceiptType);
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const requiredFields = [externalId];
const isValid = requiredFields.every((field) => field);
if (!isValid) {
alert("Por favor, completa todos los campos obligatorios.");
return;
}
const request: CustomerRequest = {
externalId,
governmentId,
mail,
name,
phoneNumber,
pacMandateId,
defaultAgent,
sendMail,
agentPhoneNumber,
silencedUntil,
rfc,
taxZipCode,
fiscalRegime,
defaultReceiptType
};
try {
// Llamada al servicio para crear el consumidor
console.log("Datos a enviar: ", request);
const response = await CustomerService.create(request);
if(response.Success){
console.log("Formulario enviado con éxito:", response);
}else{
console.error("Error de la API:", response);
}
} catch (error: any) {
if (error.response) {
// Aquí puedes ver el detalle del error que te devuelve la API
console.error("Error de la API:", error.response.data);
alert("Error al crear el consumidor: " + JSON.stringify(error.response.data));
} else if (error.request) {
console.error("No se recibió respuesta de la API:", error.request);
} else {
console.error("Error al configurar la solicitud:", error.message);
}
}};
Service:
export const CustomerService = {
create:async(data: CustomerRequest):Promise<ResponseBase<Customer>> => {
try{
debugger;
const response = await ConsumerRepository.create(data);
return response;
}
catch(ex){
throw new Error('Error al guardar la información');
}
},
}
Repository:
export const ConsumerRepository = {
create: async(request: CustomerRequest): Promise<ResponseBase<Customer>> => {
try{
debugger;
const response = await http.post<CustomerRequest, ResponseBase<Customer>>(
`/Customer/add`,
request
);
return response;
}
catch(ex){
throw new Error('Error al guardar la información');
}
},
}
API - Controller:
[HttpPost("add")]
public async Task<BaseResponse<CustomerDto>> Add(CustomerRequestDto request)
{
return await _service.Add(request);
}
Request Modelo:
public class CustomerRequestDto
{
[JsonProperty("external_id")]
public string ExternalId { get; set; }
[JsonProperty("government_id")]
public string GovernmentId { get; set; }
[JsonProperty("mail")]
public string Mail { get; set; }
[JsonProperty("name")]
public string Name { get; set; }
[JsonProperty("phone_number")]
public string PhoneNumber { get; set; }
[JsonProperty("pac_mandate_id")]
public string PacMandateId { get; set; }
[JsonProperty("default_agent")]
public string DefaultAgent { get; set; }
[JsonProperty("send_mail")]
public bool SendMail { get; set; }
[JsonProperty("agent_phone_number")]
public string AgentPhoneNumber { get; set; }
[JsonProperty("silenced_until")]
public DateTime? SilencedUntil { get; set; }
[JsonProperty("rfc")]
public string RFC { get; set; }
[JsonProperty("tax_zip_code")]
public string TaxZipCode { get; set; }
[JsonProperty("fiscal_regime")]
public string FiscalRegime { get; set; }
[JsonProperty("default_receipt_type")]
public string DefaultReceiptType { get; set; }
}
El problema que estoy teniendo es que cuando mando de esta manera la respuesta que recibo es que me esta faltando el campo "request" como que engloba todo. Pero desde mi swagger lo unico que le envio a mi controlador es esto:
{
"externalId": "string",
"governmentId": "string",
"mail": "string",
"name": "string",
"phoneNumber": "string",
"pacMandateId": "string",
"defaultAgent": "string",
"sendMail": true,
"agentPhoneNumber": "string",
"silencedUntil": "2024-09-26T01:14:12.307Z",
"rfc": "string",
"taxZipCode": "string",
"fiscalRegime": "string",
"defaultReceiptType": "string"
}
Incluso probe desde el postman al endpoint mismo enviandole desde body -> raw
esto:
{
"externalId": "1234"
}
Y llegó correctamente. Pero cuando quiero mandar del front me dice que me esta faltando el campo request. Es mas si agrego el campo request, si hiciera el cambio del modelo que envío en el submit de la siguiente manera:
const request: CustomerRequest = {
request: {
externalId,
governmentId,
mail,
name,
phoneNumber,
pacMandateId,
defaultAgent,
sendMail,
agentPhoneNumber,
silencedUntil,
rfc,
taxZipCode,
fiscalRegime,
defaultReceiptType
}
};
Por algún motivo llega a la Api, pero todos los campos que debería recibir están vacíos. Alguno me podría ayudar sabiendo si me esta faltando alguna configuracion?
Por las dudas el http que estoy usando en el Repository es asi:
import axios, { AxiosResponse } from 'axios';
const headers = {
'Content-Type': 'application/json'
};
const axiosInstance = axios.create({
baseURL: import.meta.env.VITE_API_URL,
headers: headers
});
axiosInstance.interceptors.request.use(
config => {
return config;
},
error => Promise.reject(error)
);
axiosInstance.interceptors.response.use(
response => {
return response;
},
async error => {
return Promise.reject(error.response)
}
);
const get = async <ResponseBody>(url: string): Promise<ResponseBody> => {
const response: AxiosResponse<ResponseBody> = await axiosInstance.get<ResponseBody>(url);
return response.data;
};
const getWithPagination = async <ResponseBody>(url: string, page: number, pageSize: number): Promise<ResponseBody> => {
const response: AxiosResponse<ResponseBody> = await axiosInstance.get<ResponseBody>(url, {
params: { page, pageSize }
});
return response.data;
};
const post = async<RequestBody, ResponseBody>(url: string, body: RequestBody): Promise<ResponseBody> => {
const response: AxiosResponse<ResponseBody> = await axiosInstance.post<ResponseBody>(url, body);
return response.data;
};
const put = async<RequestBody, ResponseBody>(url: string, body: RequestBody): Promise<ResponseBody> => {
const response: AxiosResponse<ResponseBody> = await axiosInstance.put<ResponseBody>(url, body);
return response.data;
};
const _delete = async<ResponseBody>(url: string): Promise<ResponseBody> => {
const response: AxiosResponse<ResponseBody> = await axiosInstance.delete<ResponseBody>(url);
return response.data;
};
export const http = {
get,
getWithPagination,
post,
put,
delete: _delete
};
console.log("Datos a enviar: ", request);
¿Muestra la información que se necesita? Es decir justo antes de la petición async, confirma esto primero