vue中axios请求mock中的数据

请求数据 1.在main.js引入mock

//引入MOCK import Mock from 'network/mock'

2.创建一个mock.js

//导入mockjs import Mock from 'mockjs' let data = { 'list|8-30':[ { name:'@cname()', address:'@city(true)', id:'increment(1)' } ] } //这里的地址自己随便起名字，确保和axios地址一致 Mock.mock('http://localhost:3000/list',"get",data)

3.创建一个request.js用来发送axios的请求

import axios from 'axios' export function request(config) { // 1.创建axios的实例 const instance = axios.create({ baseURL: 'http://localhost:3000', timeout: 5000 }) // 2.axios的拦截器 // 2.1.请求拦截的作用 instance.interceptors.request.use(config => { return config }, err => { // console.log(err); }) // 2.2.响应拦截 instance.interceptors.response.use(res => { return res.data }, err => { console.log(err); }) // 3.发送真正的网络请求 return instance(config) }

4.创建一个home.js 请求home 中的所有数据

import {request} from "@/network/request"; export function getHomeMultidata() { return request({ url: '/list' }) }

5.在Home中展示数据

import {getHomeMultidata} from '@/network/home'; export default { name: "Home", data(){ return{ } }, mounted() { getHomeMultidata().then(res=>{ console.log(res) }) } }