使用mock.js模拟网络请求

1.安装mock.js

# 安装
npm install mockjs

2.安装axios

npm install axios

3.在全局文件 main.js中引入axios

import axios from 'axios'
// 配置vue原型，(在任何组件中都可以正常使用 axios ）
Vue.prototype.http = axios

4.在src文件夹目录新建文件mock，mock文件夹下又新建文件夹json，json文件夹下新建文件login.json,里面放模拟接口响应回来的数据，如下：

 login.json 文件(模拟响应回来的数据)

{
    "result": "success",
    "data": {
      "Email": "18770471216",
      "password": "123456"
    },
    "msg": ""
  }

 5.再mock文件夹下新建mockServe.js文件

 mockServe.js

import Mock from 'mockjs'
import login from './json/login.json' // 模拟接口返回的数据 对应data后面跟的值

// 第一个参数 模拟的url 第二个参数：数据模版，也就是响应回来的值
Mock.mock('/mock/login', {
  code: 200,
  data: login
})

5.1在main.js中引入该文件

import '@/mock/mockServer'

6.在src下新建utils文件夹，里面新建axios.js文件来封装一个网络请求

import axios from 'axios'

const mockAjax = axios.create({
  baseURL: '/mock',
  timeout: 10000
})

// 请求拦截
mockAjax.interceptors.request.use((config) => {
  return config
})
// 响应拦截
mockAjax.interceptors.response.use((response) => {
  return response.data
}, (error) => {
  return Promise.reject(error)
})

export default mockAjax

7.封装接口API，src目录下新建文件夹api，

 8.在需要使用的页面调接口即可

import { LoginPost } from '@/api/login'

  async  created () {
    const res = await LoginPost(this.formData)
    console.log('res', res)
  },

响应结果如下：