react native模拟mock接口

Posted 2022-08-10 GHUIJS

安装fetch-mock(由于react native是使用fetch请求，所有这里需要安装fetch-mock)

yarn add fetch-mock

在新建的mock文件夹中写模拟数据

import mockFetch from 'fetch-mock';

type IIcon = 
  icon: object;
  title: string;
;

const iconsIndex: IIcon[] = [
  
    icon: require('@/assets/images/app/dashboard-contract.png'),
    title: '合同看板',
  ,
  
    icon: require('@/assets/images/app/dashboard-budget.png'),
    title: '预算看板',
  ,
];

mockFetch.mock(/index\\/indexIcons/, 
  code: 200,
  data: iconsIndex,
);

把模拟数据引入到项目入口组件

//App.tsx中
import '@/mock/index';

新建api包，定义接口

import defHttp from '@/utils/http';

enum Api 
  INDEX_ICON = '/index/indexIcons',


export function getIndexIcon() 
  return defHttp.get<any>(Api.INDEX_ICON);

组件中请求数据

import getIndexIcon from '@/api/PageIndex';

// 页面主体
class Index extends Component 
  state = 
    icons: [],
  ;

  componentDidMount() 
    getIndexIcon().then((res: any) => 
      this.setState(icons: res.data);
    );
  

结果