【react native】模拟mock接口

安装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});
    });
  }
}

结果