如何使用 function 发出 api get 请求？

Question

I'm trying to generate a new, random dog image with the breed name underneath using calls to the dog.ceo api using Axios, sent out by the genNewImage() function linked to my button, this is my javascript:

 function genNewImage(){ axios.get('https://dog.ceo/api/breeds/image/random') //This is the api I'm calling to. .then((body) => { var url = body.data.message; var image = document.getElementById("dogImg"); var dogText = document.getElementById("dogText"); var urlCutter = url.split('/')[4].split('-'); //Get the breed name from the retrieved url var first = urlCutter[1].charAt(0).toUpperCase() + urlCutter[1].split("").slice(1,urlCutter[1].length).join(""); //Get the first part of the breed name & capitalize first letter. var second = urlCutter[0].charAt(0).toUpperCase() + urlCutter[0].split("").slice(1,urlCutter[0].length).join(""); //Get the second part of the breed name & capitalize first letter. image.src = url; // set the src of the image object dogText.innerHTML = "This is a: " + first + " " + second; //Set the dog breed name in the paragraph }).catch((err) => { console.log('Error', err.statusCode); }) };

 <button onClick="genNewImage()">Click for a random image</button> <img id="dogImg" src=""> <p><strong><span id ="dogText"> This is a: </span></strong></p>

I'm still really new to Axios and api calls in general. My function isn't working even though I've already used this code to make the api call on new page load and I don't understand why this one doesn't work. Any advice would be greatly appreciated.

Answer 1

The problem is not the code itself but a semantic problem.

Consider these two example URLs

https://images.dog.ceo/breeds/spaniel-cocker/n02102318_9714.jpg

https://images.dog.ceo/breeds/chow/n02112137_6458.jpg

Go trough your code line by line and you will see that the problem occurs when you try to get the first name of the breed. You access the splitted URL array at index 1. You split the array by '-' delimiter. If the URL (breed) doesnt contain a '-' like the second URL does an error will be thrown because the array at index 1 is undefined. So before using the value at index 1 check if it is set at all. This will make your code run.

The error message also indicates that a variable is undefined.

 function genNewImage() { axios.get('https://dog.ceo/api/breeds/image/random').then((body) => { let url = body.data.message; let image = document.getElementById("dogImg"); let dogText = document.getElementById("dogText"); let urlCutter = url.split('/')[4].split('-'); let first = typeof(urlCutter[1]) == 'undefined'? "": urlCutter[1].charAt(0).toUpperCase() + urlCutter[1].split("").slice(1, urlCutter[1].length).join("");; let second = urlCutter[0].charAt(0).toUpperCase() + urlCutter[0].split("").slice(1, urlCutter[0].length).join(""); image.src = url; // set the src of the image object dogText.innerHTML = "This is a: " + first + " " + second; //Set the dog breed name in the paragraph }).catch(error => { console.log(error.response) }); }

 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <button onClick="genNewImage()">Click for a random image</button> <img id="dogImg" src=""> <p><strong><span id ="dogText"> This is a: </span></strong></p>