Создание сервисов в Vue как Angular

Question

Я разработал API-сервис для одного из моих ресурсов, он выглядит так:

import axios from 'axios';
export default {
get(){
    axios.get('/emails')
        .then((response) => {
            return response.data.data;
        }).catch((error) => {
                console.log(error);
                return error.response;
        });
    },
    update(){

    }
}

Мой шаблон Vue выглядит так:

<template>
<div class="col-md-7 pt-5 pr-2 pb-5 pl-5">

    {{emails}}


</div>
</template>
<script>
import EmailMessageService from '../../services/EmaiMessageService';
export default  {
   data(){
       return {
           pageNumber: 0,
           emails:[],
       }
   },
   mounted(){
       console.log(EmailMessageService.get())
       this.emails = EmailMessageService.get();
   }
}
</script>

Когда я вызываю этот метод в моем сервисе, я получаю неопределенное в компоненте, но могу нормально выйти из него в сервисе. Кажется, это может быть проблема с скупой, но я на 100% растерялся.

Я посмотрел на некоторых. другие ресурсы онлайн Я не мог понять, как решить эту проблему с помощью Axios

Answer 1

Используйте обещание then для обработки ответа.

Я не уверен, как данные отформатированы, поэтому вам, вероятно, потребуется дополнительная проверка, чтобы убедиться, что данные в правильном формате. Вы должны вернуть обещание axios и обработать возвращенные данные, используя обработчик then, и это хорошая идея, чтобы реализовать catch тоже

часть1:

import axios from 'axios';
export default {
    get(){
      return axios.get('/emails') // <--- Need this to return the promise
        .then((response) => {
            return response.data.data;
        }).catch((error) => {
            console.log(error);
            throw error.response; // <-- use throw to be able to use catch
        });
    },
    update(){

    }
}

часть 2:

<template>
<div class="col-md-7 pt-5 pr-2 pb-5 pl-5">

    {{emails}}


</div>
</template>
<script>
import EmailMessageService from '../../services/EmaiMessageService';
export default  {
   data(){
       return {
           pageNumber: 0,
           emails:[],
       }
   },
   mounted(){
       EmailMessageService.get()
           .then(response => {
               console.log(response)
               this.emails = response
           })
           .catch(error => {
               // handle error
               console.error(error)
           })
   }
}
</script>

---

ответ на вопрос, всегда ли нужно ловить рыбу

TL; DR; Вы должны всегда стремиться обрабатывать исключения на каждом этапе.

Здесь работают три слоя

• Посмотреть
  • Ваш компонент Vue
• Упаковочный
  • Заключает и абстрагирует библиотеку / функцию запроса
• Вардар / Request (вдовцы)
  • библиотека фактических запросов и обработки

Ваш запрос исходит от вашего слоя просмотра , инициируемого некоторым щелчком или во время mount(), переходит на слой оболочки , который абстрагирует запрос Axios. Как только запрос сделан и ответ получен, он возвращается из Axios в упаковщик и затем обратно в View . Каждый слой выполняет некоторую проверку ошибок.

Обработчик ответа axios может только с помощью заголовков и синтаксического анализа json определить, были ли возвращенные данные действительными, поэтому вам следует реализовать дополнительную проверку ошибок в вашей оболочке . На этом этапе вы также можете добавить дополнительную логику, которая может сделать запасной запрос или уведомление. Но все же нужно сказать, что произошла ошибка. В слое view ваша проверка ошибок будет определять, что видит пользователь или какие опции ему предлагаются при успехе или при неудаче; это решение не может быть принято ни Wrapper, ни Axios, поскольку они не предназначены для того, чтобы касаться DOM.

Если вы не реализуете перехват на уровне просмотра, независимо от того, произошла ошибка из оболочки или axios , вы получите две возможные проблемы во время исключения.

1. Вы не знаете, разрешаете ли вы ошибку или правильный ответ,

2. вы можете никогда не получить then(), а без catch пользователь может ждать без уведомления.

Итак, как бы я справился с этим, пользователь видит загрузочный счетчик по умолчанию, где-то внутри функции then, или вызов внутри, загрузочный счетчик будет заменен фактическими данными. если я вижу catch, я бы использовал сообщение об ошибке для замены счетчика.