// 添加请求拦截器

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

    // 在发送请求之前做些什么

    return config;

  }, function (error) {

    // 对请求错误做些什么

    return Promise.reject(error);

  });

// 添加响应拦截器

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

    // 对响应数据做点什么

    return response;

  }, function (error) {

    // 对响应错误做点什么

    return Promise.reject(error);

  });

如果你想在稍后移除拦截器，可以这样：

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});

axios.interceptors.request.eject(myInterceptor);

可以为自定义 axios 实例添加拦截器

var instance = axios.create();

instance.interceptors.request.use(function () {/*...*/});

• 实例：如下

  (1) config.js文件
  
  import axios from 'axios';
  
  import {Toast} from 'antd-mobile';         // antd-mobile轻提示组件Toast
  
  // 拦截请求
  
  axios.interceptors.request.use(config => {
  
      Toast.loading('加载中'，1)              // loading组件，显示文字加载中，自动关闭延时1s
  
      console.log('request go');
  
      return config;
  
  }, err => {
  
      console.log('请求失败')
  
      return Promise.reject(err)
  
  })
  
  //拦截响应
  
  axios.interceptors.response.use(config => {
  
      Toast.hide()                             // 销毁Toast组件
  
      console.log('response get')
  
      return config;
  
  }, err => {
  
      console.log('响应失败')
  
      return Promise.reject(err)
  
  })
  
  -------------------------------------------------------------
  
  (2) 在入口文件index.js文件中引入上面的cofig.js文件
  
  import React from 'react';
  
  import ReactDOM from 'react-dom';
  
  import './index.css';
  
  import App from './App';
  
  import registerServiceWorker from './registerServiceWorker';
  
  import {Provider} from 'react-redux';
  
  import {store} from './store/store.js';
  
  // import UserContainer from './component/user/container.js';
  
  import './config/config.js';
  
  import {BrowserRouter} from 'react-router-dom'
  
  ReactDOM.render(
  
      <Provider store={store}>
  
          <BrowserRouter>
  
              <App></App>
  
          </BrowserRouter>
  
      </Provider>
  
  , document.getElementById('root'));
  
  registerServiceWorker();

(4) css Modules模块化方案

• 支持less和sass的语法
• 解决命名冲突污染等问题
• 使用JS和CSS分离的写法，不会改变大家的书写习惯
• 解决依赖管理不彻底，无法共享变量，代码压缩不彻底
  使用webpack项目中，只需要简单的配置，如下：

webpack.config.dev.js

注意：这里需要提前安装css-loader插件!!

{

    module: {

       rules:[

          {

            test: /\.css$/,

            use: [

              {

                loader: 'style-loader'

              },

              {

                loader: 'css-loader?modules',     // 在css-loader后添加 ?modules即可

                 // loader: 'css-loader?modules&localIdentName=[name]-[hash:base64:5]'

                 // modules后面还可以跟具体的命名规则

                 // localIdentName 是设置生成样式的命名规则。

              }

            ]

          }

       ]

    }

}

------------------------------------------------------------------------------

换一中写法：(一样的)

      {

        test: /\.css$/,

        exclude: /node_modules\/antd/,

        use: [

          require.resolve('style-loader'),

          {

            loader: require.resolve('css-loader'),

            options: {

             importLoaders: 1,  // 在css-loader前应用的loader的数目, 默认为0

             modules:true,  // 开启css-modules模式, 默认值为flase

             localIdentName:'[name]-[local]-[hash:base64:8]',//css-modules模式下local类名的命名

            },

          },

        ]

      },

(!)

 {

        test: /\.css$/,

        include: /node_modules\/antd/,

        use: [

          require.resolve('style-loader'),

          {

            loader: require.resolve('css-loader'),

            options: {

              modules:false

            },

          },

        ]

      },

      {

        test: /\.css$/,

        exclude: /node_modules\/antd/,

        use: [

          require.resolve('style-loader'),

          {

            loader: require.resolve('css-loader'),

            options: {

              importLoaders: 1,

              modules:true,

              localIdentName:'[name]-[local]-[hash:base64:8]',

            },

          },

        ]

      },

安装：

cnpm install antd-mobile --save

使用：

import { Button } from 'antd-mobile';

import 'antd-mobile/dist/antd-mobile.css'; 

按需加载：

(1)安装babel按需加载插件 babel-plugin-import

cnpm install babel-plugin-import --save-dev

(2)在create-react-app脚手架eject后，package.json文件中，配置如下：

// 自己搭建可以写在.babelrc中

 "babel": {

    "presets": [

      "react-app"

    ],

    "plugins": [

      "transform-decorators-legacy",

     ["import", { "libraryName": "antd-mobile", "style": "css" }]

    ]

  }

(3) 使用

import { Button } from 'antd-mobile';

...

...

(4) 因为使用了css-modules模块化方案，所以在配置packageg.json中babel的时候，要修改成如下配置：

 {

        test: /\.css$/,

        include: /node_modules\/antd/,

        use: [

          require.resolve('style-loader'),

          {

            loader: require.resolve('css-loader'),

            options: {

              modules:false

            },

          },

        ]

      },

      {

        test: /\.css$/,

        exclude: /node_modules\/antd/,

        use: [

          require.resolve('style-loader'),

          {

            loader: require.resolve('css-loader'),

            options: {

              importLoaders: 1,

              modules:true,

              localIdentName:'[name]-[local]-[hash:base64:8]',

            },

          },

        ]

      },

(6) css-loader 和 ( style-loader, postcss-loader )