React、Axios、MockJs實現Ajax的請求攔截

1. 工具安裝

npm install axios   //axios請求包
npm install mockjs  //mockjs庫

2.建立mock.js資料夾，程式碼如下

import Mock from 'mockjs';
const Random = Mock.Random;

// For example：獲取輪播圖
Mock.mock('/api/banners', 'get', {
  code: 200,
  msg: 'success',
  data: {
    'banners|1-10': [
      {
        image_url: Random.image('200x100', Random.color(), Random.color(), 'png', Random.title(5)),
        title: Random.ctitle(5),
      },
    ],
  },
});

3.在index.js檔案中引入mock資料夾

import './utils/mock.js';

4.Axios簡易封裝

import axios from 'axios';

const instance = axios.create({
  timeout: 8000,
  withCredentials: false, // default
});

instance.interceptors.request.use(
  function (config) {
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

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

export default instance;

4. 在index.js檔案裡面引入，掛載到react物件上面，可以在任何例項上面獲取到

import Http from './utils/request.js';

React.Http = Http;

4.在元件中使用Ajax請求，mock會自動攔截

export default class Comment extends Component {
    state={
        banners:[]
    };
	
	async componentDidMount(){
        //React.Http 是我把ajax請求繫結在了react上面，可以在任何例項上面獲取到
        this.serverRequest = await React.Http.get('/api/banners')
        const {data}=this.serverRequest;
        if(data.code===200){
            this.setState({banners:data.banners})
        }
    }

	componentWillUnmout(){
        //由於ajax請求是非同步的，官方提供的方法進行資料的獲取；
      	this.serverRequest.abort()  
    }
}