Как использовать загрузку $ nuxt. $ От перехватчика axios - PullRequest
Новая
       22

Как использовать загрузку $ nuxt. $ От перехватчика axios

0 голосов
/ 25 марта 2019

Я хотел бы использовать $nuxt.$loading https://nuxtjs.org/api/configuration-loading/ вне компонента Vue.Я создал центральный JS для попадания API.

services / api-client.js 

import axios from "axios";
import { state } from '../store/modules/sessions';

const axiosClient = axios.create({
  baseURL: process.env.BASE_URL,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Api-Key': state().token
  }
});

axiosClient.interceptors.request.use(function (config) {
  // show nuxt loading here
  return config;
}, function (error) {
  return Promise.reject(error);
});

axiosClient.interceptors.response.use(function (response) {
  // hide nuxt loading here
  if (response.data.status.code != 200) {
    throw { message: response.data.status.errorDetail };
  } else {
    return response;
  }

}, function (error) {
  // hide nuxt loading here
  return Promise.reject(error);
});

export default {
  all(path) {
    return axiosClient.get(path);
  },
  show(path) {
    return this.all(path);
  },
  create(path, params) {
    return axiosClient.post(path, params);
  },
  update(path, params) {
    return axiosClient.put(path, params);
  }
};

и из моего index.vue Я отправляю действия, которые запускают APIЗапрос.

<template>
  <div>
    <h1> Welcome </h1>
  </div>
</template>

<script>
export default { 
  created() {
    this.$store.dispatch('getInsiders', this);
  }
}
</script>

1 Ответ

1 голос
/ 25 марта 2019

Вам действительно нужно объявить собственный клиент Axios?

Стандартный способ сделать это - использовать модуль Axios от Nuxt, а затем настроить его в своем плагине.

nuxt.config.js 

modules: ['@nuxtjs/axios'],
plugins: ['~/plugins/axios']

~ / plugins / axios 

export default ({ $axios, redirect }) => {
  $axios.onError(error => {
    // do anything you need
  })
}

Модуль axios будет автоматически управлять состоянием загрузки.Хотя вы по-прежнему можете отключить выполнение для отдельных запросов

Например, от компонента / действия 

await this.$axios.$get('/myapi', { progress: false })
...