uniapp 裸mock构建

使用better-mock

安装better-mock

npm install better-mock

新建文件

1. 新建mock文件夹
2. mock文件夹下新建index.js
3. 小程序平台要引入dist/mock.mp.js
4. 根据数据模板生成模拟数据

//mock下的index.js
const Mock = require('better-mock/dist/mock.mp.js')
Mock.mock('api/test', {
    'list|1-10': [{
        'id|+1': 1
    }]
})

全局引入

import Mock from './mock'

发送请求

uni.request({
                url:'api/test',
                success:res=>{
                    console.log(res)
                }
            })

请求接口封装

根目录下新建一个文件utile，在建一个request.js对请求拦截做mock模拟

let server_url='http://localhost:8080';//请求地址

function service(options = {}) {

      
       options.url = `${server_url}${options.url}`;

          //配置请求头

        options.header = {

        'content-type': 'application/x-www-form-urlencoded',


    };

    return new Promise((resolved, rejected) => {

                //成功

        options.success = (res) => {

               

            if (Number(res.data.code) == 200) {  //请求成功

                resolved(res.data.data);

            } else {

                uni.showToast({

                    icon: 'none',   

                    duration: 3000,

                    title: `${res.data.msg}`

                });

                rejected(res.data.msg);//错误

            }

        }

              //错误

        options.fail = (err) => {

            rejected(err); //错误

        }

        uni.request(options);
    });

}

export default service;

后续更改

经request.js之后mock下的index模拟接口需要更改

const Mock = require('better-mock/dist/mock.mp.js')

Mock.mock('http://localhost:8080/api/test', 'get', {
	"code": 200,
	"msg": "succsee",
	"data": {
		'list|1-10': [{
			'id|+1': 1
		}]
	}
})

另写一个api.js对接口进行修改。位置自拟，在请求时导入即可

import request from '../../units/request.js'

export function getData(data) {

  return request({

    url: '/api/test',

    method: 'GET',

    data

  })

}

请求处需要更改

import { getData } from './api.js';//导入上述封装js
	export default {
		methods: {
			getData() {
				getData('parameter').then(data => {
				
				   console.log(data);
				
				}).catch((e) => {
					console.log(e);
				});

			}
		},
	}