nuxt+ mock+ axios 创建随机数据

这里简单介绍一下，nuxt 下mock + axios 的安装、使用。

mock能够生成随机数据，拦截 Ajax 请求。对于纯前端来说，mock 配合express，就可以自己搭建后台了。
也可以参考一下 vue-element-admin 对于mock 的使用，以及一些大佬踩过的坑。

mock

1，安装

npm install mockjs

2，添加mock 代码

// plugins/mock.js
import Mock from "mockjs"

Mock.mock(/user\.json/, {
  "list|1-10": [
    {
      "id|+1": 1,
      email: "@EMAIL",
    },
  ],
})

3，nuxt.config.js配置

 plugins: [
    '@/plugins/mock'
  ],

4，mock数据调用

  methods: {
    async getTempGameList() {
    const mockData = await this.$axios.$get("user.json")
    console.log("mockData", mockData)
    },
}

数据结果：

注意：mock的请求数据无法在nuxt 提供的 asyncData 里调用。这里是在 methods 里调用的。

@nuxtjs/axios

关于 @nuxtjs/axios 的安装，详见之前的文章：nuxt---axios封装+环境变量配置

---

在获取数据的时候出现如下问题：

TypeError: request.upload.addEventListener is not a function

网上说：导致这一问题的根本原因是 Mockjs 中, 封装了原生的 XMLHttpRequest 为 MockXMLHttpRequest.
解决思路是, 把原生 XMLHttpRequest 的 upload 属性赋给 MockXMLHttpRequest 的原型对象.在 node_modules/mockjs/dist/mock.js 加入以下代码

MockXMLHttpRequest .prototype.upload = createNativeXMLHttpRequest().upload

参考链接：Axios + mockjs: request.upload.addEventListener is not a function 的原因和解决办法

以上就是nuxt + mock + axios 的基本用法。其中，mock的使用，还需要多看官方文档。

参考案例：mock 随机生成中文名