It looks like you are receiving unhandled promises.

I think you could use Async and await - what this will do is stop your code from compiling when you send your get request. Making the code wait until the request is fulfilled, until it continues to compile.

This is a link to an article that could help you get started with it :)

https://dev.to/tutrinh/basic-using-async-and-await-with-axios-ad5

[edit]

This is a rough idea what it could look like - hope this helps somewhat.

const fetchTeamName = async(teamId) => {
    try{
        const response = await axios.get(`https://soccer.sportmonks.com/api/v2.0/teams/${teamId}?api_token=${apiKey}`)
        return response.data.data.name
    }  
}

If you use await to wait for promises instead of using then, it might be easier to read (and write).

const res = await axios.get(`xxxx`)
const scores = res.data.data;

Word of warning - you didn't explain where you intend to run this code, and what your build process is (if any). await isn't always available without using a tool like Babel or esbuild to convert modern JavaScript to JavaScript that's compatible with a wide range of browsers.

However, assuming you're running your code in an environment that supports async / await, you can also make use of the Promise.all function to wait for all 3 promises to complete.

async function fetchFullTimeHeadToHeadScore(homeTeamId, awayTeamId) {
    const homeTeamNamePromise = fetchTeamName(homeTeamId);
    const awayTeamNamePromise = fetchTeamName(awayTeamId);
    const scorePromise = fetchScore(homeTeamId, awayTeamId); // axios.fetch
    const results = await Promise.all([ homeTeamNamePromise, awayTeamNamePromise, scorePromise ]);
    const homeTeamName = results[0];
    const awayTeamName = results[1];
    const matches = results[2];
    return matches.map(match => `${homeTeamName} ${match.scores.ft_score} ${awayTeamName}`);
}

If you really need to get this working with promises, this article explains: https://javascript.info/promise-chaining

Here's the relevant code:

// Make a request for user.json
fetch('/article/promise-chaining/user.json')
  // Load it as json
  .then(response => response.json())
  // Make a request to GitHub
  .then(user => fetch(`https://api.github.com/users/${user.name}`))
  // Load the response as json
  .then(response => response.json())
  // Show the avatar image (githubUser.avatar_url) for 3 seconds (maybe animate it)
  .then(githubUser => {
    let img = document.createElement('img');
    img.src = githubUser.avatar_url;
    img.className = "promise-avatar-example";
    document.body.append(img);

    setTimeout(() => img.remove(), 3000); // (*)
  });

In your case, it looks like you can slot in a Promise.all([ homeSide, res.data.data, awaySide ]); into your code to return the resolved promises for homeSide and awaySide, and the actual value of res.data.data (even though it's not a promise).

function fetchFullTimeHeadToHeadScore(homeTeamId, awayTeamId) {
  return axios
    .get(
      `https://soccer.sportmonks.com/api/v2.0/head2head/${homeTeamId}/${awayTeamId}?api_token=${apiKey}`
    )
    .then((res) => {
      const homeSide = fetchTeamName(homeTeamId)
      const awaySide = fetchTeamName(awayTeamId)
      return Promise.all([ homeSide, res.data.data, awaySide ]);
    })
    .then((data) => {
      return data[1].map((obj) => {
        return data[0] + " " + obj.scores.ft_score + " " + data[2];
      });
    })
    .then((scores) => {
      scores.length = 10;
      return scores;
    })
    .catch((err) => {
      console.log(err);
    });
}

fetchTeamName returns an unresolved Promise, whose return value is only accessible within the success function (.then(onFulfillment, onRejection)). I think you've recognised this, which is why you've done fetchTeamName(foo).then((res) => res), but the misconception is that you haven't realised that this also returns a Promise!

There's no way to access the result of a Promise outside the scope of its instance methods (.then(), .catch(), etc.).

You could probably do something like

      fetchTeamName(homeTeamId).then((homeSide) => {
        fetchTeamName(awayTeamId)
          .then((awaySide) => {
            return res.data.data.map((obj) => {
              return `${homeSide} ${obj.scores.ft_score} ${awaySide}`;
            });
          })
          .then((scores) => {
            scores.length = 10;
            return scores;
          });
      });

but you're probably thinking "hang on, the value of awaySide doesn't depend on the value of homeSide, so why am I waiting for that API call to complete before I even start the call to get the value of awaySide"?

You'd be right to think this! A better solution uses Promise.all:

      const homeSidePromise = fetchTeamName(homeTeamId);
      const awaySidePromise = fetchTeamName(awayTeamId);

      Promise.all([homeSidePromise, awaySidePromise])
        .then(([homeSide, awaySide]) => {
          return res.data.data.map((obj) => {
            return `${homeSide} ${obj.scores.ft_score} ${awaySide}`;
          });
        })
        .then((scores) => {
          scores.length = 10;
          return scores;
        });

This is better, but it's still hard to read and not much better than the callback hell that you used to get before Promises were a widely-supported language feature.

A more modern pattern involves using async/await. This syntax still uses Promises "under the hood", but helps you write code that is much more readable. I'll leave rewriting your code sample with async/await as an exercise for the reader.