0

I am making an api call from React app with axios.

The user selects 2 values from 2 dropdowns, and the api call is made using these 2 values. Normally the response will be an object, but occassionally if the user selects 2 values which dont have a match, then it wont return anything.

I want to ensure a message is displayed if nothing exists for those 2 items.

Currently in my axios response if nothing is return I get a long bunch of what looks like the index html page.

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.adebe8fe.js"></script><link href="/static/css/main.aa245bf1.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

I am getting the data from a c# controller,

[HttpGet("search/{antifungal}/{interacting}")]
        public async Task<ActionResult<DrugInteractionDTO>> getAntifungalInteraction(string antifungal, string interacting)
        {
            var interactions =  await _context.DrugInteractions
            .Include(di => di.AntifungalAgent)
            .Include(di => di.InteractingDrug)
            .Where(di => di.AntifungalAgent.Name.ToLower() == antifungal.ToLower())
            .Where(di => di.InteractingDrug.GenericName.ToLower() == interacting.ToLower())
            .Select(x => new DrugInteractionDTO
            {
                Severity = x.Severity,
                SeverityAsString = x.Severity.ToString(),
                ProDetailedInformation = x.ProDetailedInformation,
                BasicDetailedInformation = x.BasicDetailedInformation,
                Antifungal = x.AntifungalAgent.Name,
                InteractingDrug = x.InteractingDrug.GenericName,
                ID = x.ID
            }).FirstOrDefaultAsync();
            
            if (interactions == null) return NotFound();

            return interactions;
        }

Using swagger if I enter 2 items in the query that dont exist I get

{
  "type": "https://tools.ietf.org/html/rfc7231#section-6.5.4",
  "title": "Not Found",
  "status": 404,
  "traceId": "00-29b4bb56b99fe26416be4e3c09add6b7-dc13efbf731e6a72-00"
}

So I would have thought calling console.log(response.data) in my axios call would log 404, but it just gives undefined`

This is currently what I have in React,

const getInteractionDetails = () => {
  agent.drugInteractions.getIndividual(antifungalDrug, interactingDrug)
  .then((response) => {
    console.log(response.status)
    if(response.status === 404){
      setError('No interaction exists')
    } else {
      setInteractionDetails(response)
    }
    
  })
  .catch(error => console.log(error))
}

How come status isnt being shown in my axios response?

Danny Jebb
  • 802
  • 1
  • 7
  • 16
  • there is no open '(' to the closing '})' or didn't see one. – mzm Dec 08 '22 at 17:45
  • it's in the .then code, `.then((response)` – Danny Jebb Dec 08 '22 at 21:00
  • Axios treats unsuccessful responses (ie status >= 400) as an error so it will drop to your `.catch()` callback. You can check `error.response.status` – Phil Dec 08 '22 at 23:44
  • Does this answer your question? [Axios. How to get error response even when api return 404 error, in try catch finally](https://stackoverflow.com/questions/48298890/axios-how-to-get-error-response-even-when-api-return-404-error-in-try-catch-fi) – Phil Dec 08 '22 at 23:45
  • @Phil The response is being returned in the `.then` block. if I change the console.log(response.status) to just response. I get all the html code as shown in the original question. – Danny Jebb Dec 09 '22 at 11:02

0 Answers0