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;

5. 在组件中使用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()  
    }
}