web-dev-qa-db-ja.com

Reactプロジェクトのaxiosインターセプターにグローバルロード/スピンエフェクトを追加する方法

ReactプロジェクトでAPI呼び出しにaxiosを使用しており、api呼び出しのリクエストとaxiosインターセプターの応答の間にグローバルにロードまたはスピン効果を追加したいのですが、以下のコードです私の迎撃。

import Axios from 'axios'

Axios.interceptors.request.use(function (config) {
  // spinning start to show
  const token = window.localStorage.token;
  if (token) {
     config.headers.Authorization = `token ${token}`
  }
  return config
}, function (error) {
  return Promise.reject(error);
});

Axios.interceptors.response.use(function (response) {
  // spinning hide
  return response;
}, function (error) {
  return Promise.reject(error);
});
javascriptreactjsaxiosinterceptor
4
Liao Zhuodi

おそらく、アプリがaxiosを介したデータの読み込みでビジー状態のときにフルスクリーンの読み込みメッセージを表示するという、より簡単なアプローチを取ることができますか？

たとえば、コード/プロジェクトに次の追加を行って、axioリクエスト中にグローバルな「読み込み中のメッセージ」を画面に表示できます。

CSS：

/* Define css class for global loading message to cover 
   screen during axios operations */

.loading-indicator:before {
    content: '';
    background: #000000cc;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.loading-indicator:after {
    content: 'Loading';
    position: fixed;
    width: 100%;
    top: 50%;
    left: 0;
    z-index: 1001;
    color:white;
    text-align:center;
    font-weight:bold;
    font-size:1.5rem;        
}

JavaScript：

Axios.interceptors.request.use(function (config) {

  // spinning start to show
  // UPDATE: Add this code to show global loading indicator
  document.body.classList.add('loading-indicator');

  const token = window.localStorage.token;
  if (token) {
     config.headers.Authorization = `token ${token}`
  }
  return config
}, function (error) {
  return Promise.reject(error);
});

Axios.interceptors.response.use(function (response) {

  // spinning hide
  // UPDATE: Add this code to hide global loading indicator
  document.body.classList.remove('loading-indicator');

  return response;
}, function (error) {
  return Promise.reject(error);
});

この方法を使用すると、CSS3アニメーションを使用して、「読み込み中」のメッセージをアニメーション化されたスピナーまたは類似の何かで置き換えることができます。これが役立つことを願っています！

8
Dacre Denny

より高いレベルのコンポーネント（たとえばApp）でaxiosインターセプターを設定できます。 「SHOW_LOADER」および「HIDE_LOADER」アクションタイプを使用して、レデューサーで読み込み状態を定義できます。これらのインターセプターは、リクエストがaxiosを介して送受信される前に、対応するアクションをディスパッチして、ローダーコンポーネントをレンダリングできるストア内のロード状態を更新します。

これがあなたの質問に答えることを願っています。

アプリコンポーネント

import React from 'react';
import axios from 'axios'
import { connect } from 'react-redux';
import { loading } from '../actions'
import Loader from './Loader'

class App extends React.Component{
 componentWillMount(){
   const self = this
   axios.interceptors.request.use(function (config) {
     // spinning start to show
     self.props.loading(true)
     return config
    }, function (error) {
      return Promise.reject(error);
    });

    axios.interceptors.response.use(function (response) {
     // spinning hide
      self.props.loading(false)

     return response;
   }, function (error) {
     return Promise.reject(error);
   });
 }
 render(){
   return (
    <div>
      { this.props.loader ? <Loader /> : null }

      {/* 
        Your other components
      */}
    </div>
   )
 }

}

const mapStateToProps = (state)=>{
  return {
    loader: state.loader
  }
}

export default connect(mapStateToProps,{
  loading
})(App);

ローダーリデューサー

const loader = (state = false, action) => {
    switch (action.type) {
        case "SHOW_LOADER":
            return action.data;
            break;
        case "HIDE_LOADER":
            return action.data;
            break;
        default:
            return state;
    }
}

export default loader;

アクション

export const loading = (bool)=>{
  return bool ? {
    type:"SHOW_LOADER",
    data:bool
  }: {
    type: "HIDE_LOADER",
    data: bool
  }
}
1
Hemant Parashar