react中使用axios + mockjs模擬后台數據

之前寫了在vue中使用mockjs模擬后台接口,現在使用react,也把react中的使用寫一下.基本方法和vue一樣

我這個項目是用react腳手架搭建的,項目源碼地址:  https://github.com/shengbid/my-react-admin

 

1. 安裝mockjs和axios

yarn add axios -S

yarn add mockjs - D

 

2. 在項目中新建幾個文件,文件位置也沒有特別規定要放在哪,根據自己的習慣放就行了

需要一個mock文件,配置接口數據;一個axios文件,配置axios;一般還會有一個接口管理文件,放接口名稱,現在都不會直接在項目中引入axios調用

 

3. axios文件配置, 就是正常的請求攔截響應處理

/src/common/request.js

import axios from 'axios'
import { message } from 'antd';

const service = axios.create({
  // baseURL: '',
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      message.error(res.message)
    } else {
      return res
    }
  },
  error => {
    message.error(error.message)
    return Promise.reject(error)
  }
)

export default service

 

4. mock文件配置

我是按功能模塊做了文件拆分,在index.js里統一設置

/mock/file.js

import Mock from 'mockjs'

// mock方法,詳細的可以看官方文檔
const Random = Mock.Random

export default [
  {
    url: '/upload/file',
    type: 'post',
    response: config => {

      return {
        code: 200,
        data: {
          name: 'file',
          url: Random.image('200x100', '#50B347', '#FFF', 'Mfile')
        }
      }
    }
  },
  {
    url: '/getList/file',
    type: 'get',
    response: () => {

      let fileList = []
      for (let i = 0; i < 6; i++) {
        let file = {}
        file.uid = Random.id()
        file.name = Random.title(3, 5)
        file.url = Random.image('200x100', '#50B347', '#FFF', Random.title(1))
        fileList.push(file)
      }
      return {
        code: 200,
        data: {
          fileList
        }
      }
    }
  }
]

/mock/index.js

import Mock from 'mockjs'

import file from './file'

const mocks = [
  ...file
]

// mock請求方法放在這里統一處理,1是簡便寫法,2是如果請求路徑需要加統一前綴或域名,可以在這里處理
for (const i of mocks) {
  Mock.mock(i.url, i.type, i.response)
}

 

5. 后台接口請求路徑配置文件

/src/services/upload.ts

import request from '@/commons/request'

export function getFiles() {
  return request({
    url: '/getList/file',
    method: 'get'
  })
}

export function uploadFile(data: any) {
  return request({
    url: '/upload/file',
    data,
    method: 'post'
  })
}

 

5. 引入mock,在項目的最外層目錄index.tsx里引入,直接引入就可以

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../mock'

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

 

6. 組件中使用

/src/pages/upload/index.tsx

其實就和正常的獲取后台數據一樣,只是發送請求時mockjs會攔截,后期使用后台接口時,只需把index.tsx里的mock引入注釋就可以了

 

6. 頁面打印數據