基于NPM和webpack的HTML页面开发——mock虚拟数据服务

基于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);
  });
}

效果图