最近没事想自己写点东西，项目搭建好了后，突然发现很多基本的配置与封装都不记得怎么写了，在网上东找找西搜搜，东拼西凑整理了一套完整的记录一下。（一些全局请求配置，调用，封装的方法）
第一，封装axios
以前记录过axiso的全局拦截，补充一下全局请求的封装
在src目录下新建文件夹utils，文件request.js，内容如下

/****   request.js   ****/
import axios from 'axios'
//1. 创建新的axios实例
const request = axios.create({
    baseURL: '/api', // 公共接口-本地
    timeout: 30 * 1000, // 超时时间单位是ms
    headers: {
        "Content-Type": "application/json",
    },
})

// 2.请求拦截器
request.interceptors.request.use(config => {
    // console.log(config)
    // config.headers.Authorization = ''; //如果要求携带在请求头中
    return config;
}, error => {
    console.log(error)
    return Promise.reject(error);
})
// 3.响应拦截器
request.interceptors.response.use(response => {
    //  console.log(response)
    return response;
}, error => {
    // console.log(error)
    return Promise.reject(error);
}
)

//4.导出文件
export default request

第二，新建api.js，（位置可以自己安排）封装请求接口方法，内容如下

import request from '../utils/request'//第一步文件的地址
//请求后端的接口地址
export function userlist(data) {
    return request({
        url: '/Hello/first',
        method: 'get',
        data: data
    })
}
//自己写的mock地址，后文顺带记录一下mock使用方法
export function mocktest(params) {
    return request({ type: "get", url: "/parameter/query", data: params });
}

第三，mock的使用，
根目录新建文件夹mock，文件index.js，内容如下

// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
    timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
    if (key === './index.js') return;
    configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
    for (let [path, target] of Object.entries(item)) {
        let protocol = path.split('|');
        Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
    }
});

另新建一个写mock接口的文件（地址可自己安排），我这里写在mock文件夹下，内容如下

const Mock = require('mockjs')

export default {
//这里写的地址对应第二步api文件中的请求地址
    'get|/api/parameter/query': option => {
        return {
            status: 200,
            message: 'success',
            data: Mock.mock({
                'list|5': [{
                    title: "@cname()",
                    describe: "@id()",
                    creatime: "@city(true)",
                    seetime: "@city(true)",
                    goodtime: "@city(true)",
                    discusstime: "@city(true)",
                }
                ]
            })
        };
    },
}

在main.js

import mock from "../mock/index";
Vue.use(mock)

第四，文件使用

<template>
  <div class="main_container"></div>
</template>

<script>
//引用一下api文件中写好的方法，要用哪个就写哪个
import { mocktest } from "../api/api";
export default {
  data() {
    return {

    };
  },
  mounted() {
  //调用封装好的接口
    mocktest().then((res) => {
      console.log(res);
    });
  },
};
</script>
<style scoped>
</style>

结束：如果是自己搭建应该都需要这些配置的把，先记录下来，免得以后要用到处找，如果是用开源项目做二开，可以对比参考学习一下，开源大神的肯定有比我这个更简洁更优美的写法，持续补强吧