1.工具函数层
设置默认请求地址
设置默认超时时间
设置默认请求拦截
设置默认响应拦截
/**
* ajax工具函数层
*/
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:5000' //默认服务器地址
axios.defaults.timeout = 10000;//配置超时时间10秒
//配置请求拦截器
axios.interceptors.request.use(config => {
//取出token 鉴权。 token相当于人的身份证 一个角色的信息 权限全部存在这个加密的字符串里面
let token = window.localStorage.getItem('t_k');
if (token) {
//只要有token 所有的接口请求都会携带这个token 发给后台【后台检查token 判断你是否有当前请求的权限】
// config.headers 请求头 请求头携带token数据 判断权限
//authorization 字段是和后端商议的【当前项目叫authorization】
config.headers.authorization = token;
}
return config
}, err => {
return Promise.reject(err)
})
//配置响应拦截器
axios.interceptors.response.use(response => {
return response
}, err => {
return Promise.reject(err)
})
//暴露配置好的axios
export default axios
2.接口管理层
将接口统一到某一个文件夹/js文件中,并导出
/**
* 用户接口模块
* 因为使用ES6的方法对象里面的数据简写
* 所有post参数必须是data
* 所有get参数必须是params
*/
import request from '@/utils/request'
/* 登录接口 */
export const checkLogin = (data) => {
return request({
method: 'post',
url: '/users/checkLogin',
data
})
}
/* 添加账号 */
export const addUser = (data) => {
return request({
method: 'post',
url: '/users/add',
data
})
}
/* 获取用户列表 */
export const getUserList = (params) => {
return request({
method: 'get',
url: '/users/list',
params
})
}
/* 删除账号 */
export const deleteUser = (params) => {
return request({
method: 'get',
url: '/users/del',
params
})
}
3.组件层
导入对应的组件并使用
//引入对应的用户ajax模块函数
import { checkLogin } from '@/api/user'
//发送请求
async getData(){
let res = await checkLogin({ ...this.formData });
}