Axios http request doesn't trigger on macOS/iOS only

Question

I have a web app that makes calls to an API. I am using Axios library for the http requests. The app makes 3 different Axios calls (1 to retrive books, 1 for book description, 1 for book image). Books are created and displayed upon Axios calls and then, when the user clicks on any of theses books, the book description is fetched and displayed on the screen. This works perfectly in all browsers except for Safari. On Safari, the books and image calls are made and processed perfectly but the one for the description never triggers (it's the ONLY one that doesn't work). I checked on a Safari Emulator and on the console no errors pop up, the code doesn't break but on the network tab you can see no Axios call is made at all when you click on the book.

/////  FETCH BOOK DESCRIPTION     /////
// book.title will be used to match book.key of current active books to the one selected by the user
// active books are those displayed on the screen among which the user will choose to click on 

// the function is triggered onclick of any book. There will always be an activeBook.title === bookTitle since bookTitle had been previously taken from activeBook.title.

function fetchBookDescription() {
  let bookTitle = document.querySelector(
    ".book-selected .book-title"
  ).innerText;

  // use book title to find book and its key to fetch description
  for (let activeBook of activeBooks) {
    if (activeBook.title === bookTitle) {
     
    // I checked and up until here it works, it finds the title match but then it doesn't proceed to make the axios call below.

      axios
        .get(`https://openlibrary.org${activeBook.key}.json`)
        .then((response) => {
          changeHeading();

          let bookDescription = response.data.description;
          
          // some data processing... //

          return bookDescription;
        })
        .then((description) => {
          createBookDescription(description);
        })
        .catch((error) => {
          createBookDescription("Book description not available");
        })
    }
  }
}

I tried:

• to change the Axios call for an Async await try catch (I had read in other posts Axios sometimes doesn't work on iOS/mac).
• add an event.preventDefault() onclick on the book (i had also read it could have been related to the click event).

Both tries worked on all browsers ( so changes were made correctly), except for Safari.

I cant' think of anything else because that axios call works in other browsers and Axios itself is also working on Safari except for that particular call.

Any advice would be greatly appreciated. Thanks a lot. Richard.

Answer 1

Thanks a lot for having a look at it. I solved it. Mac was automatically placing a return carriage (/r) at the end of the string inside the bookTitle variable. So the boolean match activeBook.title === bookTitle proved false.

I fixed it by replacing “/r” with “” with a regex as follows:

  let bookTitle = document.querySelector(
".book-selected .book-title").innerText;

bookTitle = bookTitle.replace(/\r)/gm, "");

Thanks again! Richard.