axios的三层封装思想

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 });
}