react/vue中mockjs模拟接口拦截请求

1：下载依赖

npm i mockjs

如果需要支持ts/tsx，需要下载另一个依赖包

npm i @types/mockjs

2：新建文件夹

项目结构如下

3：mockjs的使用

具体语法参考官网 Mock.js (mockjs.com)

mock文件夹下index内容如下：

import Mock from 'mockjs'

Mock.mock(/\/userInfo*./,'get',(d)=> {
  console.log(d,'ddddddddddddd')
  return {
    code:200,
    message:'请求成功',
    data:{
      id:Mock.Random.boolean()
    }
  }
})

这是一个简单的接口模拟，当发起get请求，并且请求路径为/userInfo时，会返回模拟数据。这里第一个参数url使用的正则形式，可以匹配传参。

这里内容是随意写的，真实内容可以根据需求自行替换。

4：axios封装

一个简单的封装，没做什么处理，可以根据实际情况自己修改。mockjs目前无法拦截fetch，需要拦截fetch的，下载mockjs-fetch。

使用方法参考：mockjs-fetch - npm (npmjs.com)

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

const instance = axios.create({
  baseURL:'',
  timeout: 10000,
});

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  message.error({
    content:error,
    duration:2
  })
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error);
});

interface IQuery{
  url:string;
  headers:{
    [props:string]:any
  };
  data?:any
}

export const get = ({ url, headers }:IQuery) => {
  return instance.get(url, headers).then(res => {
    return res
  })
}

export const post = ({ url, headers, data }:IQuery) => {
  return instance.post(url, data,  headers ).then(res => {
    return res.data
  })
}

export const delet = ({ url, headers }:IQuery) => {
  return instance.delete(url, headers).then(res => {
    return res.data
  })
}

export default instance

5：接口

不封装也行，可以直接使用

import { get} from '@/utile/request'

export default {
  getUserInfo:({...props})=>
    get({
      url:'/userInfo',
      headers:{
        params:{...props}
      }
    })
}

6：引入mockjs

在main.ts中引入mockjs

import './mock/index'

7：使用接口

我demo用的是react

export default function(){
  function getUserInfo(){
    userApi.getUserInfo({id:'123'}).then(res=>{
      console.log(res,'请求结果');
    })
  }
  return(
    <div className="container">
      <Button type="primary" onClick={getUserInfo}>用户信息</Button>
    </div>
  )
}

请求结果：