[随笔一记]企业中结合mock和axios，实现虚拟线上接口数据的传递

用到的插件就是mockjs和axios

mock的安装：

在终端输入 npm i mockjs或者yarn add mockjs

axios的安装就不说了

介绍mock

mock的作用就是虚拟一个接口，让我们可以用axios来请求到，它有本地和线上两种方法

一、本地mock

首先创建一个mock.js文件

//代入mock
import Mock from 'mockjs'
//提供本地的接口数据
let getHomeData=() => {
  return {
    code: 200,
    data: {
      tableData: [
        {
          name: 'Apex',
          todayBuy: 500,
          monthBuy: 3500,
          totalBuy: 22000
        },
        {
          name: 'CSGO',
          todayBuy: 300,
          monthBuy: 2200,
          totalBuy: 24000
        }
      ]
    }
  }
}
//使用mock中第一个参数是设置一个虚拟数据接口地址'/home/getData'
//第二个参数里面设置接口中包涵的数据
Mock.mock('/home/getData', getHomeData)

接着去到我们需要用到接口的组件内部

//先导入axios
import axios from 'axios'
//接着我们就可以创建一个函数
const getData = async () => {
      let { data: res } = await axios.get('/home/getData')
      console.log(res)
    }
//然后在onMounted内调用就行啦
onMounted(()=>{getData()})

最后就会打印出来本地虚拟的code和data数据啦

二、线上mock

首先，这里我们会用到一个网址fastmock 在线接口 Mock 平台

这是fastmock的网址，我们在这个网址里面生成线上