最近没事想自己写点东西,项目搭建好了后,突然发现很多基本的配置与封装都不记得怎么写了,在网上东找找西搜搜,东拼西凑整理了一套完整的记录一下。(一些全局请求配置,调用,封装的方法)
第一,封装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>
结束:如果是自己搭建应该都需要这些配置的把,先记录下来,免得以后要用到处找,如果是用开源项目做二开,可以对比参考学习一下,开源大神的肯定有比我这个更简洁更优美的写法,持续补强吧