Использование внешнего API клиента JS в Vuejs SPA - PullRequest
Новая
       7

Использование внешнего API клиента JS в Vuejs SPA

0 голосов
/ 05 июля 2018

Я только начал использовать Vuejs и пытаюсь интегрировать стороннюю библиотеку JS API-клиентов. Приложение Vue использует vue-router. Сторонний API-клиент построен на axios.

API-клиент JS выглядит так: 

function RestClient() {}

RestClient.prototype.getUsers = getUsers;

async function getUsers() {
  try {
    const response = await axios.get('https://reqres.in/api/users');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

Чтобы интегрировать это в Vue, я включил axios и rest-client.js путь к сценарию в файл index.html: 

<head>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="rest-client.js"></script>
</head>

А в main.js

Vue.prototype.$restClient = new RestClient();

Это сделало его доступным для всех компонентов. И это прекрасно работает. Например, я могу получить доступ к функциям RestClient с vue components.

Это правильный способ справиться с таким процессом? Не могу не задаться вопросом, может ли быть лучший способ.

1 Ответ

0 голосов
/ 05 июля 2018

Возможно, вы захотите прочитать о Vue plugins .

Плагины обычно добавляют функциональность глобального уровня в Vue.

Расширение прототипа Vue фактически поощряется документами: 

// 4. add an instance method
Vue.prototype.$myMethod = function (methodOptions) {
  // something logic ...
}

Для такого простого варианта использования этого может быть достаточно, но, допустим, вы также хотите, чтобы компонент индикатора загрузки запускался при вызове API. Возможно, имеет смысл объединять и распространять их вместе с помощью плагина Vue. Затем вы можете установить весь плагин вещи, состоящий из одного утверждения.

Это именно то, что vue-router делает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...