axios拦截请求，mock返回模拟数据

开发项目中，还没有后端接口时，可以使用axios的请求拦截器和响应拦截器，在请求发送到服务器之前或响应返回到客户端之前进行干预。

拦截后使用mockjs模拟后端接口，自己可以定义一些返回数据，实现数据的交互。

一、安装

npm install axios mockjs

二、请求拦截器

// 引入axios
import axios from 'axios'

// 创建axios实例
const http = axios.create({
    baseURL: '/api', // 通用请求的地址前缀
    timeout: 10000, //超时时间
})

//设置请求拦截器
http.interceptors.request.use(function (config) {
    console.log("请求拦截器成功")       //condig是配置对象
    return config;
}, function (error) {
    console.log("请求拦截器失败")
    return Promise.reject(error);
});
//设置响应拦截器
http.interceptors.response.use(function (response) {
    console.log("响应拦截器成功")         //response是响应结果
    return response;
}, function (error) {
    console.log("响应拦截器失败")
    return Promise.reject(error);
});

export default http

三、使用mockjs

创建mock目录，定义mock主文件index.js，并在该文件中存放mock数据，在main.js引入mock文件。

import './api/mock'

// 引入Mock
import Mock from 'mockjs'
import homeApi from './mockServeData/home'
import user from "./mockServeData/user"
import permission from "./mockServeData/permission";

// 定义请求拦截
// Mock.mock( url, type, template)
// 第一个参数 url 为请求路径，
// 第二个参数 type 为请求类型 如：get、popst、delete、put 等，默认为get
// 第三个参数是生成的数据，作为响应数据返回。可以为对象，也可以为函数，函数需要return
Mock.mock('/api/home/getData', 'get', {
  // 属性 list 的值是一个数组，随机生成 1 到 10 个元素
  "list|1-10": [
     {
        // 随机生成一个常见的英文名
        "firstName": Random.first(), // "Michelle"
        "firstName2": '@first()', // "Jose"
        // 随机生成一个常见的英文姓。
        "lastName": Random.last(), // "Taylor"
        "lastName2": '@last()', // "Clark"
        // 随机生成一个常见的英文姓名。括号里的布尔值，指示是否生成中间名（可选）。
        "name": Random.name(true), // "Donald Eric Jackson"
        "name2": '@name(true)', // "Donald Eric Jackson"
        // 随机生成一个常见的中文姓
        "cfirstName": Random.cfirst(), // "任"
        "cfirstName2": '@cfirst()', // "郭"
        // 随机生成一个常见的中文名。
        "clastName": Random.clast(), // "芳"
        "clastName2": '@clast()', // "芳"
        // 随机生成一个常见的中文姓名。
        "cname": Random.cname(), // "程强"
        "cname2": '@cname()', // "程强"
        // 随机生成颜色,格式为 '#RRGGBB'。
        "color": Random.color(), // "#94f279"
        "color2": '@color()', // "#94f279"
        // 生成随机邮箱地址 可以指定域名，例如 163.com
        "email": Random.email('163.com'), // "l.fvilfpz@163.com"
        "email2": '@email()', // "l.fvilfpz@163.com"
        // 返回一个随机的布尔值。
        "boolean": Random.boolean(), // true
        "boolean2": '@boolean()', // true
        // 生成 0-100 随机整数
        "point": Random.integer(0, 100), // 69
        "point2": '@integer(60, 100)', // 98
        // 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 3 位。
        "floatNumber": Random.float(1, 100, 1, 3), // 60.695
        "floatNumber2": '@float(1, 100, 3, 5)', // 19.29368
        // 随机日期
        "date": Random.datetime('yyyy-MM-dd'), // "2017-05-01"
        "date2": "@datetime()", // "1973-06-12 13:05:18"
        // 随机时间
        "time": Random.time(), // "21:33:01"
        "time2": "@time()", // "21:33:01"
        // 当前日期
        "now": Random.now('year'), // "2023-01-01 00:00:00"
        "now2": "@now('year')", // "2023-01-01 00:00:00"
        // 生成随机字符串 长度为 5
        "string": Random.string(5), // "jPXEu"
        "string2": '@string(5)', // "jPXEu"
        // 随机生成一个（中国）大区。
        "region": Random.region(), // "华北"
        "region2": '@region()', // "华北"
        // 随机生成一个（中国）省（或直辖市、自治区、特别行政区）。
        "province": Random.province(), // "澳门特别行政区"
        "province2": '@province()', // "澳门特别行政区"
        // 随机生成一个（中国）市。括号里的布尔值，指是否生成所属的省（可选）
        "city": Random.city(true), // "广东省 肇庆市"
        "city2": '@city()', // "广东省 肇庆市"
        // 随机生成一个（中国）县。括号里的布尔值，指是否生成所属的省、市（可选）
        "county": Random.county(true), // "江苏省 常州市 其它区"
        "county2": '@county()', // "江苏省 常州市 其它区"
        // 随机生成一个邮政编码（六位数字）。
        "zip": Random.zip(), // "806124"
        "zip2": '@zip()', // "806124"
        // 从数组中随机选取一个元素并返回。
        "pick": Random.pick(['a', 'e', 'i', 'o', 'u']), // "e"
        "pick2": '@pick(["a", "e", "i", "o", "u"])', // "e"
        // 随机生成一个 18 位身份证。
        "id": Random.id(), // 112.127.151.37
        "id2": '@id()' // 97.46.129.222
     }
   ]
})