Александр

(async () => {

async function fetchData1(url) {
   try { 
    let response =  await fetch(url);   // promise
     return await response.json();      // promise
  } catch(e) {
     return null;
  }
}

// на промисах  это выглядело бы так, вам все равно нужно вернуть обьект промиса, если вам важно вернуть результат.

function fetchData2(url) {
   return new Promise((resolve,reject) => {
       fetch(url).then(res => res).then (res => res.json()).then((result) => {
         resolve(result);  // говорим что наш промис достиг успеха,
      }).carch(e => {
          resolve(null);  // так как мы повторяем логику try catch  мы используем пустой ответ. вместо reject(e);
      })
   })
}

const promises = [
    fetchData1('/last-news'),       
    fetchData2('/last-comments'),  
    fetchData2('/popular-news'),
];
// (после объявления массива методы уже будут выполнятся, лучше делать через promises.push(...) )
// .. куча логики
// приказываем ожидать если не все выполнялось.
const result = await Promise.all(promises);
console.log({result});    

// или так 
Promise.all(promises).then( results => {
    console.log({result});    
})

// a так если мы хотим последовательно и лапшой promise hell
fetchData1('/last-news').then(resultNetws => {
        fetchData2('/last-comments').then(lastComments => {
             fetchData2('/popular-news'').then(popularNews => {
           
              })
       })
});

// рекомендую прочитать про статичные методы у обьекта Promise.all итд.


})());

Поискав в интернете

data: () => ({
  maxlen: 10,
  items: [
    'hello, world!!',
    'fuck the world',
    'fuck everything',
    '1234567890',
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit,',
   ],
}),
methods: {
  short1: (str, maxlen) => str.length <= maxlen ? str : str.slice(0, maxlen) + '...',
  short2: (str, maxlen) => str.substring(0, maxlen) + (str.charAt(maxlen) && '...'),
  short3: (str, maxlen) => str.replace(RegExp(`(.{${maxlen}}).+`), '$1...'),
  short4: (str, maxlen) => str.replace(RegExp(`(?<=.{${maxlen}}).+`), '...'),
},

<input type="range" min="1" max="20" v-model="maxlen">
<span>{{ maxlen }}</span>

<div v-for="n in items">
  <div v-text="short1(n, maxlen)"></div>
  <div v-html="short2(n, maxlen)"></div>
  <div :text-content.prop="short3(n, maxlen)"></div>
  <div>{{ short4(n, maxlen) }}</div>
</div>