vue-cli + mockjs,为何F12 -》Network，看不到发出的请求？

Question

https://segmentfault.com/a/11...
通过vue-cli新建了一个dialog的项目，想在项目里用mockjs，于是参照上面的文档，使用了其中的简单的方式
项目目录如下：

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import Mock from './mock.js'  // 引入mock.js
import 'element-ui/lib/theme-default/index.css'
import '../static/css/main.css'

Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

mock.js

import Mock from 'mockjs'
const Random = Mock.Random
const getProducts = function () {
  let products = []
  for (let i = 0; i < 10; i++) {
    let product = {
      id: Random.increment(),
      name: Random.cname(),
      barcode: Random.natural(10000)
    }
    products.push(product)
  }
  return { products }
}
Mock.mock('/products', 'get', getProducts)

axios.js

import axios from 'axios'
import qs from 'qs'
// 请求拦截器
axios.interceptors.request.use(function(config) {
  return config
}, function(error) {
  return Promise.reject(error)
})
// 响应拦截器
axios.interceptors.response.use(function(response) {
  return response
}, function(error) {
  return Promise.reject(error)
})
export default axios

products.js

import axios from 'apis/axios'
export default {
  getProducts () {
    return axios.get(`/products`)
  }
}

products.vue

<template>
  <div>
    <el-table :data="products" class="margin-bottom-20">
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="barcode" label="条形码"></el-table-column>
      <el-table-column
        label="操作">
        <template scope="scope">
          <el-button @click="openEditProdDlg" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import api from '../products'
  export default {
    data () {
      return {
        products: []
      }
    },
    methods: {
      getProducts () {
        api.getProducts().then(res => {
          console.log(res.data.products)  // 此处能拿到数据，但是F12 -》 network看不到发出的请求
          this.products = res.data.products
        })
      }
    },
    mounted () {
      this.getProducts()
    }
  }
</script>

请问 使用mockjs能拿到数据，但为何F12 -》Network，看不到发出的请求？

Answer 1

因为请求在发出去之前就被mockjs拦截了