基于NPM
和webpack
的HTML页面开发无法使用import
的方法引入mockjs
来实现虚拟数据服务,因此这里将会采用webpack-api-mocker
来实现效果。
安装
webpack-api-mocker
是需要额外安装的。
npm i webpack-api-mocker -D
为了测试效果,我们这里使用axios
进行数据通信。
npm i axios -S
运用
创建mock.js
文件。
// mock.js
const delay = require('webpack-api-mocker/utils/delay');
module.exports = delay(
{
'POST /mock/helloPost': (req, res) => {
const { data } = req.body; // 获取请求信息
console.log('post: ', data);
return res.json({
data: 'success helloPost'
});
},
'GET /mock/helloGet1': {
data: 'success helloGet1'
},
'GET /mock/helloGet2': (req, res) => {
const { data } = req.query;
if (data === 'fail') {
return res.status(400).json({
status: 'error',
code: 400
});
}
return res.json({
data: 'success helloGet2'
});
}
},
1200
);
在webpack.config.js
引入mock.js
。
const path = require('path');
const apiMoker = require('webpack-api-mocker');
module.exports = {
...,
devServer: {
before(app) {
apiMoker(app, path.resolve('./mock/index.js'));
}
}
};
为了方便配置,创建request.js
。
// request.js
import Axios from 'axios';
const service = Axios.create({
baseURL: process.env.BASE_API,
withCredentials: true,
timeout: 20000
});
service.interceptors.response.use(
(response) => {
const { status, statusText, data } = response;
if (status === 200) {
return data;
} else {
return Promise.reject(new Error(`error status: ${statusText}`));
}
},
(error) => {
return Promise.reject(new Error(`request error: ${error}`));
}
);
export default service;
最后让我们来试试效果吧。
// index.js
import request from './../../utils/request';
window.onload = function () {
document.getElementById('postData').addEventListener('click', () => {
request({
url: '/helloPost',
method: 'POST',
data: {
data: 'post req'
}
}).then((data) => {
alert(data.data);
});
});
document.getElementById('getData1').addEventListener('click', () => {
request({
url: '/helloGet1',
method: 'GET'
}).then((data) => {
alert(data.data);
});
});
document.getElementById('getData2Fail').addEventListener('click', () => {
getData2('fail');
});
document.getElementById('getData2Success').addEventListener('click', () => {
getData2('success');
});
};
function getData2(data) {
request({
url: '/helloGet2',
method: 'GET',
params: {
data
}
}).then((data) => {
alert(data.data);
});
}
效果图