nuxt+ mock+ axios 创建随机数据

A_Ghost

这里简单介绍一下,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 随机生成中文名

阅读 1.2k

知道的越多,不知道的也就越多。

18 声望
3 粉丝
0 条评论

知道的越多,不知道的也就越多。

18 声望
3 粉丝
文章目录
宣传栏