我实在不想写后端了,就用apifox发个假数据当我写了吧！手把手教你怎么用Apifox！我实在不想写后端了,就用apif

mock数据又称模拟数据，本章将以小白的视角讲述该如何在没有后端的情况下，传数据给前端

本章重点讲述如何Apifox来mock数据与使用Axios，因此关于react项目的创建将跳过

React中安装Axios

第一步:安装

npm install axios

第二部:引入

const axios = require('axios').default;

第三步:发起一个请求(你也可以理解为接收一个数据)

首先说明最基础的两种请求格式：

GET 请求
POST 请求

第一种`GET` 请求

const axios = require('axios');

// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    //大白话就是成功了就执行这个里面的逻辑代码
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    //大白话就是失败了就执行这个里面的逻辑代码
    console.log(error);
  })
  .then(function () {
    // 总是会执行
    //大白话就是无论成功还是失败了都执行这个里面的逻辑代码
  });

第二种`POST` 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

当有多个请求时

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

第四步:封装

一般来说第三步就能直接获得Apifox中mock的数据了，然后直接存入变量中的业务代码里使用就行了，但是从业务规范上来说，不推荐也不能直接就使用axios.post,axios.get这些方法在页面的业务代码上使用。

推荐的写法是：

按照常规项目结构，将创建api文件夹并与src源代码文件夹同级，再在api文件夹中创建名为api.ts的文件

const axios = require('axios').default;

export function testapi(){
    console.log('发起接口请求');
    return axios.get('https://mock.apifox.cn/m1/3116930-0-default/api/user')
        .then(function (response:any) {
            console.log(response);//按照url从response对象中获得约定的参数
        })
        .catch(function (error:any) {
            console.log(error);
        });
}

接着在页面的业务代码中引入名为api.ts的文件与其中名为testapi的接口

import {testapi} from '../../../api/textapi'

tips:本章所使用的api为Apifox生成的云端mock,可公开免费使用

react中安装axios节结束

Apifox中创建mock数据

首先需要知道的是，Apifox 是区分接口设计和接口运行两个概念的。

接口设计：即 新建接口 界面或接口详情里的编辑界面，用途是 定义接口文档规范，而不是运行接口，所以该界面是只能定义接口基本信息、参数名及参数说明等，而不能设置参数值。参数值、前置脚本/后置脚本 等信息请在接口运行界面或接口用例界面填写。
接口运行：即接口详情里的运行界面，用途是 临时调试接口，运行完后，需要点击保存为用例，才能将填写的 参数值、前置脚本/后置脚本 等信息保存下来；否则关闭 tab 后，这些信息将会丢失。

大白话就是说：一个是写了本说明书，一个是写了个接口逻辑。只有说明书不能发数据，只有接口逻辑前端或者后端不知道约定的接口怎么用。

而我们要mock数据，就需要在接口运行这个中写明白你希望创建的mock是怎么样的。(可能你已经看懵了，让我们来实操一下吧)

第一步:去百度下载安装注册登录(流程省略)

第二步:创建接口

第一步.png

第三步:设置接口(又称设置url)

第二步.png

第四步:设置要发给前端的参数

第三步.png

第五步:在Apifox中查看你设置的接口是否通畅

第四步.png 第五步.png 如果不通畅，可以喂给程序一些泻药(开玩笑)，如果不通畅请联系笔者

第六步:启动react项目，在浏览器控制台的网络中检查是否成功连通

其他.png 欧克了，结束

结语

研究了我一个上文加下午，我发现这个Apifox纯粹作为一个mock数据的软件就太大材小用了。若对这个软件感兴趣可以，详细去看一下他们的官方文档: apifox官方文档

-完-

我实在不想写后端了,就用apifox发个假数据当我写了吧！手把手教你怎么用Apifox！