如何使用$ nuxt.$从axios拦截器加载 [英] How to use $nuxt.$loading from axios interceptor

问题描述

我想使用 $ nuxt.$ loading https://nuxtjs.org/api/configuration-loading/在Vue组件之外.我创建了用于访问API的中央js.

I would like to use $nuxt.$loading https://nuxtjs.org/api/configuration-loading/ outside of Vue component. I created central js for hitting APIs.

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请求的操作.

and from my index.vue I'm dispatching the actions which trigger the Api Request.

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

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

推荐答案

下面的代码是您解决问题的方法.请尝试这个.

The solution to your problem is this code below. Please try this.

export default function({ $axios, store }: any) {
  $axios.onRequest((config: any) => {
    store._vm.$nextTick(() => {
      store._vm.$nuxt.$loading.start()
      return config
    })
  })

  $axios.onResponse((response: any) => {
    store._vm.$nextTick(() => {
      store._vm.$nuxt.$loading.finish()
      return response
    })
  })

  $axios.onError((error: any) => {
    store._vm.$nextTick(() => {
      store._vm.$nuxt.$loading.finish()
      return Promise.reject(error)
    })
  })
}

这篇关于如何使用$ nuxt.$从axios拦截器加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！