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

NingbYarn發表於2020-09-23
  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;

  1. 在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()  
    }
}

相關文章