vue学习-使用mockjs模拟发送数据

mockjs模拟数据

官方教程中提到

# 安装
npm install mockjs

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

使用：

api/axios.js 正常拦截请求处理响应

import  axios from 'axios'
import config from '@/config'


const baseUrl=process.env.NODE_ENV==='development'?config.baseUrl.dev:config.baseUrl.pro//这种写法是什么意思啊？provess.env.NODE_ENV是什么


class HttpRequest{
    constructor(baseUrl){
        this.baseUrl=baseUrl;
        this.queue={};
    }
    
    getInsideConfig(){
        const config={
            baseURL:this.baseUrl,
            header:{
                //请求头配置
            }
        }
        return config;
    }

    
    interceptors(instance,url){
        instance.interceptors.request.use((config)=>{
            //处理config
            console.log("拦截和处理请求")
            config.data={
                msg:'helloword'
            }
            console.log(config)
            return config
        })
        instance.interceptors.response.use((res)=>{
            //处理响应
            console.log("处理响应")
           // console.log(res)
            return res
        },(error)=>{
            //请求出问题，处理问题
            console.log(error)
            return{error:"网络出错"}
        })
    }

    request(options){
        const instance=axios.create()//创建实例对象
        options=Object.assign(this.getInsideConfig(),options)
        this.interceptors(instance,options.url)
        return instance(options);
    }
    
}

const axiosObj=new HttpRequest(baseUrl);
export default axiosObj

api/data.js

import axios from '@/api/axios'

export const getUserData=()=>{
    return axios.request({
        url:"user",
        method:"get"
    })
}

重要的是api/mock.js的配置：

import Mock from 'mockjs';

//设置请求延时
Mock.setup({
    timeout:1000
})

//直接使用字符串匹配路径，还可以使用正则
// Mock.mock('/api/user',{
//     username:"boun",
//     age:25,
//     gender:"男",
//     type:"1？"
// })

Mock.mock(/\/api\/user/igs,{
    //可以随机图片，邮箱
    username:"boun",
    age:25,
    gender:"男",
    type:"1？",
    "time":"@datetime",//随机生成一个时间
    "score|1-800":800,
    "rank|1-100":100,//随机生成一个数1-100之间
    "nickname":"@cname",//随机生成一个中文名
    "address":"@url",
    "imgUrl":"@image",
    'email':"@email"
})

在最外层main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
if(process.env.NODE_ENV=='development') require("@/api/mock")
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

组件中调用：
Home.vue的script内容

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import {getBannerData} from '@/api/data'
import {getUserData} from '@/api/data'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  async mounted(){
   // let result=await getBannerData()
    let result=await getUserData()
    console.log(result.data,result.status)
  }
}
</script>

结果：