mockjs使用

官网：http://mockjs.com/examples.html
控制台中可以输入：

var data = Mock.mock({"success":true,"data|10":[{"video":"blob:http%3A\/\/www.imooc.com\/114999a0-8c02-4654-982c-403ace01404a","_id":"@ID","thumb":"@IMG(1200x600,@color())"}]})
data.data.forEach(function(item){$('#examples').append('<h3>' + item._id + '</h3><image src=" '+ item.thumb +' "/>')})

这样就可以也页面底部看到获得到的数据并显示在页面上

1.工程目录中安装mockjs

npm i mockjs --save

2.安装好后找到已安装模块中的node_modules\mockjs\dist\mock.js，删除
如下代码(第一行的 “’‘’逗号也要删的，因为该方法用到一些依赖的模块，而本工程没有安装）

,
        /*
            生成一段随机的 Base64 图片编码。

            https://github.com/imsky/holder
            Holder renders image placeholders entirely on the client side.

            dataImageHolder: function(size) {
                return 'holder.js/' + size
            },
        */
        dataImage: function(size, text) {
            var canvas
            if (typeof document !== 'undefined') {
                canvas = document.createElement('canvas')
            } else {
                /*
                    https://github.com/Automattic/node-canvas
                        npm install canvas --save
                    安装问题：
                    * http://stackoverflow.com/questions/22953206/gulp-issues-with-cario-install-command-not-found-when-trying-to-installing-canva
                    * https://github.com/Automattic/node-canvas/issues/415
                    * https://github.com/Automattic/node-canvas/wiki/_pages

                    PS：node-canvas 的安装过程实在是太繁琐了，所以不放入 package.json 的 dependencies。
                 */
                var Canvas = module.require('canvas')
                canvas = new Canvas()
            }

            var ctx = canvas && canvas.getContext && canvas.getContext("2d")
            if (!canvas || !ctx) return ''

            if (!size) size = this.pick(this._adSize)
            text = text !== undefined ? text : size

            size = size.split('x')

            var width = parseInt(size[0], 10),
                height = parseInt(size[1], 10),
                background = this._brandColors[this.pick(this._brandNames())],
                foreground = '#FFF',
                text_height = 14,
                font = 'sans-serif';

            canvas.width = width
            canvas.height = height
            ctx.textAlign = 'center'
            ctx.textBaseline = 'middle'
            ctx.fillStyle = background
            ctx.fillRect(0, 0, width, height)
            ctx.fillStyle = foreground
            ctx.font = 'bold ' + text_height + 'px ' + font
            ctx.fillText(text, (width / 2), (height / 2), width)
            return canvas.toDataURL('image/png')
        }

3.回到工程里面的js页面，

import Mock from 'mockjs'//引入

_fetchData() {
        return fetch('http://rapapi.org/mockjs/18145/api/creation?    accessToken=ac')
            .then((response) => response.json()) 
            .then((responseJson) => {
                //console.log(responseJson)  打印出来数组里只有1条
                var data = Mock.mock(responseJson)
                console.log(data)//此时data数组里面是10条，而不是1条
            })
            .catch((error) => {
                console.error(error);
            });
    }