vue中使用axios以及mock进行ajax请求数据模拟

最新推荐文章于 2025-06-23 09:52:24 发布

原创最新推荐文章于 2025-06-23 09:52:24 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#mock #axios #数据模拟 #拦截器

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Vue项目中结合axios和Mock.js进行ajax请求数据的模拟。通过安装axios和Mock.js，配置模拟数据，设置axios请求及拦截器，提供了一个基于vue-cli的实例代码，替换App.vue内容后运行可以看到模拟请求的效果。

使用axios以及mock进行ajax请求数据模拟

对于axios和mock相关的接口这里就不做具体说明了，官网都有很详细的说明，这里是传送门https://www.kancloud.cn/yunye/axios/234845，https://github.com/nuysoft/Mock/wiki/Getting-Started

需要安装axios以及mock
npm install --save axios mockjs

在文件中引入axios以及mockjs

import Mock from 'mockjs'

import axios from 'axios'

配置mock模拟假数据

Mock.mock('/a.php', {
'yewe|4': 'a.php '
})

Mock.mock('/user', {
'name|1-3': 'user'
})

设置axios请求ajax

axios.get('/a.php')
.then((res) => {
  console.log(res.data, 'success')
})
.catch((err) => {
  console.log(err, 'error')
})

设置拦截器

// 请求拦截器
axios.interceptors.request.use((req) => {
  if (req.url === '/a.php') {
    console.log('yes')
    req.url = '/user'
  }
  console.log(req, '--req')
  return req
}, (err) => {
  return Promise.reject(err)
})

// 响应拦截器
axios.interceptors.response.use((res) => {
  if (res.data && res.data.name) {
    res.data.name = 'xxyy'
  }
  return res
}, (err) => {
  return Promise.reject(err)
})

最后给出完整的实例代码，demo是依据vue-cli脚手架搭建的，只需要将App.vue文件的内容替换，npm run dev之后就可以看到该实例的效果

<template>
  <div id="app">
    <button  @click="fetchData">ajax</button>
  </div>
</template>

<script>
import Mock from 'mockjs'
import axios from 'axios'

// 请求拦截器
axios.interceptors.request.use((req) => {
  if (req.url === '/a.php') {
    console.log('yes')
    req.url = '/user'
  }
  console.log(req, '--req')
  return req
}, (err) => {
  return Promise.reject(err)
})

// 响应拦截器
axios.interceptors.response.use((res) => {
  if (res.data && res.data.name) {
    res.data.name = 'xxyy'
  }
  return res
}, (err) => {
  return Promise.reject(err)
})

Mock.mock('/a.php', {
  'yewe|4': 'a.php '
})

Mock.mock('/user', {
  'name|1-3': 'user'
})

export default {
  name: 'App',
  methods: {
    fetchData () {
      axios.get('/a.php')
        .then((res) => {
          console.log(res.data, 'success')
        })
        .catch((err) => {
          console.log(err, 'error')
        })
    }
  }
}
</script>