Как совместить try...catch... для async/await и Promise.catch()?

Question

[bormor]

В проектах на Vue и React есть сервис для работы с api, в котором для каждой операции выполняется обработка ошибок по такой схеме:

import axios from 'axios';

const posts = {
    getPosts(){
        return axios
            .get('https://jsonplaceholder.typicode.com/p2osts/1')
            .then(r => r.data)
            .catch(err => handleError(err, 'posts.getPosts()'))
    }
}

/**
 * Localize error sourse for debuging usability
 * 
 * @param {*} err - catched error
 * @param {string} apiMethod - name like 'posts.getPosts()'
 */
function handleError(err, apiMethod){
    console.error(`Error in api().${apiMethod}:`)
    console.error(err);
    // code for error logging in production
}

export function api(){
    return{
        posts
    }
}

Т.е. по вызвову - api().posts.getPosts() происходит обращение к api сервера и если происходит ошибка она выводиться в консоль и логируется в облачном сервисе.

Как в компоненте который использует такой сервис добавить notification, который покажет юзеру текст в случае ошибки ?
Такой вариант не срабатывает:

try{
    const data = await api().posts.getPosts();
    console.log( data ); 
}
catch{
    console.log( 'Показать уведомление об ошибке' ); 
}

Comments

[Михаил]

throw её в handleError может быть

Только лучше вот так

Только лучше вот так
.catch(handleError('posts.getPosts()'))

function handleError(name) {
  return (err) => {
    throw err;
  };
}

[bormor]

Михаил, Спасибо! Это хороший вариант решения!

[Модератор]

Для комментирования ответа жмите линк "Комментировать" под ответом
Не нужно писать комментарий в форме для ответа
Оповещения о такой реплике не поступит автору ответа

Не нужно засорять секцию ответов "спасибовсем" и тп

Answer 1

[Михаил]

.catch(handleError('posts.getPosts()'))

function handleError(name) {
  return (err) => {
    throw err;
  };
}

Answer 2

[Владимир]

если хотите получить ошибку в компоненте, модифицируйте сервис, чтобы он возвращал объект {data, error} и в компоненте смотрите что пришло, ошибка или данные

import axios from 'axios';

const posts = {
    getPosts(){
        return axios
            .get('https://jsonplaceholder.typicode.com/p2osts/1')
            .then(r => {data: r.data})
            .catch(error=> {
              handleError(error, 'posts.getPosts()')
              return {error}
            })
    }
}

import axios from 'axios';

const posts = {
    getPosts(){
        return axios
            .get('https://jsonplaceholder.typicode.com/p2osts/1')
            .then(r => r.data)
            .catch(error=> {
              handleError(error, 'posts.getPosts()')
              throw err;
            })
    }
}

Comments

[bormor]

Спасибо за совет. Тоже интересный вариант.