6-1 介绍mock.js及axios全局配置

目录：

• mock.js介绍
• axios全局配置

一、mock.js介绍

1、基本信息

作用：生成随机数据，拦截ajax请求

官网：http://mockjs.com/

github地址：https://github.com/nuysoft/Mock/wiki(mock具体的使用)

2、安装：

#yarn安装
>yarn add mockjs

#npm安装
>npm install mockjs

3、核心

//1.根据数据模板生成模拟数据
Mock.mock( rurl, rtype, template)

/*
** rurl: 表示需要拦截的 URL，可以是 URL 字符串或者 URL 正则
** eg.  /\/domain\/list\.json/、'/domain/list.json'
*/

//2.随机生成数据
Mock.Random()

二、 axios全局配置

1、安装mockjs和axios

>npm install mockjs axios

2、添加目录api和mock

目录结构如下：

...
|-src
    |-api //接口请求全部写在api目录下(新增)
        |-config.js
    |-common
        ....
    |-mock  //mock模拟数据目录(新增)
        |-index.js
    |-store
        ...
    |-views
        ...
    ....

3、编写 api下的 config.js

import axios from 'axios'


//创建一个axios实例
const service = axios.create({
  //请求超时时间
  timeout: 3000
});

// 添加请求拦截器：比如发送请求之前，给它的请求头加入一个token值传给后端，这样就不用给每一个加token值了
service.interceptors.request.use(
  config => {
    return config
  },
  err => {
    console.log(err);
  }
);
//添加响应拦截器
service.interceptors.response.use(
  response => {  //这边可以根据状态码做判断
    let res = {};
    res.status = response.status;
    res.data = response.data;
    return res;
  },
  err => console.log(err)
);

export default service

4、在main.js中导入 axios

//全局配置
import http from '@/api/config'

//添加到原型中，使其变成全局变量
Vue.prototype.$http = http;

const router = new VueRouter({
  routes
});

/* eslint-disable no-new */
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');