当前位置：首页 > article >正文

Axios-Mock-Adapter mock数据

article 2024/11/2 23:49:19

摘要：最近一个项目没有后端配合，临时使用使用Axios-Mock-Adapter来mock数据的逻辑，简单记录下使用步骤如下

1. 安装Axios-Mock-Adapter

首先，安装Axios-Mock-Adapter。Axios Mock Adapter 是一个用于模拟 Axios 请求和响应的库，主要用于测试和开发环境中。它通过拦截 Axios 的请求来提供自定义的响应，从而避免在测试中进行实际的网络请求。

npm install axios-mock-adapter --save

接着，创建Axios实例，这一步src/utils/request.js中已完成

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

export default service

2. 创建模拟数据文件

然后，创建模拟数据文件src/mock/index.js配置 Axios Mock Adapter，以模拟请求和响应。创建一个 Mock Adapter 实例并将其与Axios实例关联。这样，当发出请求时，Mock Adapter 就会拦截这些请求

// import axios from 'axios'
import AxiosMockAdapter from 'axios-mock-adapter'
import request from '@/utils/request' // 引入上面创建的 Axios 实例

const mock = new AxiosMockAdapter(request)

// Mock GET 请求
mock.onGet('/api/data').reply(200, {
  message: 'Hello World'
})

// Mock POST 请求
mock.onPost('**/api/sys/login**').reply(200, {
  data: {
    token: '8fa22e88-f6ab-4a4b-930a-a5e62c4c74e8'
  },
  message: '登陆成功',
  success: true
})

export default mock

3. 引入文件并在组件中使用

再然后，在在主入口文件main.js中引入 Mock

import '@/styles/index.scss'
// 导入svgIcon
import installIcons from '@/icons'
// 导入mock
import '@/mock/index.js'

const app = createApp(App)
installElementPlus(app)

最后，在Vue组件中使用Mock 数据，此处调用登录接口。当你使用 Axios 发送请求时，如果请求匹配已定义的 Mock 响应，Mock Adapter 会返回你设置的响应，而不执行真实的网络请求。

// 登陆动作处理
const loading = ref(false) // 使用ref声明的数据默认值false
const loginFormRef = ref(null) // 使用ref声明的数据默认值null,用于获取组件实例
const store = useStore()
const handleLogin = () => {
  // 1.进行表单校验
  loginFormRef.value.validate((valid) => { // vue3的compsition API中没有this.refs
    if (!valid) return
    // 2.触发登陆动作
    loading.value = true
    store
      .dispatch('user/login', loginForm.value)
      .then((res) => {
        console.log(res)  //返回数据：data: {token: '8fa22e88-f6ab-4a4b-930a-a5e62c4c74e8'},message: "登陆成功",success: true
        loading.value = false
        // 3. TODO:进行登陆后处理
      })
      .catch((err) => {
        console.log(err)
        loading.value = false
      })
  })
}

启动项目验证。

查看全文

http://www.kler.cn/a/376494.html