vue项目中请求层的封装：（请求层也实现 模块化 ）

1.axios二次封装

//http.js
import axios from 'axios'
import router from '@/router'

//创建一个axios实例
let $axios = axios.create({
   // baseURL:"http://localhost:3000/api", 配置代理就不用写这么全了
    baseURL:'/api',
    timeout:3000
})
//请求拦截器
$axios.interceptors.request.use(function(config){
    if(config.url=='/userlogin'){
        return config;//登陆的话，可以直接访问登录接口
    }else{//其他页面的接口，去请求时，需要带上token
        let userinfo = JSON.parse(localStorage.getItem('userinfo')||'{}')//localStorage可能会存在浏览器兼容问题，如果想跨多浏览器的话，可以去github上搜store的库
        config.headers.authorization = userinfo.token; //authorization是跟后端约定好的字段名,放在请求头里
        return config;
    }
},function(error){
    //请求出错，并d出错误信息，可以用UI框架里的d框会好看一点
    alert(error.message)
})
//响应拦截器
$axios.interceptor.response.use(function(response){
	if(response.data.code==403){//登录过期
        router.replace('/login');//用replace，使history里面当前页面路径被替换为/login，再次登录之后直接展示首页，所以当前页面没必要在history中存在
        return response.data
    }
    //这里可以处理多种状态码。。。这里只做了两个
    return response.data
},function(error){
    //响应出错，并d出错误信息
    alert(error.message)
})
//暴露axios实例
export default $axios;

跨域处理：配置代理

2.请求层 模块化 1. 用户管理模块的 请求层

//user.js
import $axios from "@/common/http"

// 管理员登录
export function Login(data){
    return $axios.post("/userlogin",data)
}
/**
 * 获取管理员列表
 */

export async function getUser(page = 1, size = 3) {
    let res = await $axios.get("/userlist", {
        params: {
            size,
            page
        }
    })
    if (res.code == 200 && res.list) {
        return res.list  
    } else {
        return [];
    }
}
/**
 * 添加管理员
 * @param {*} data  添加的数据
 */
export function addUser(data) {
    return $axios.post("/useradd", data)
}
/**
 * 修改管理员
 * @param {*} data  修改的数据
 */
export function editUser(data) {
    return $axios.post("/useredit", data)
}
/**
 * 删除管理员
 * @param {*} uid  删除的用户uid
 */
export function delUser(uid) {
    return $axios.post("/userdelete", { uid })
}
// 获取管理员总人数
export async function getTotal() {
    let res = await $axios.get('/usercount')
    //    console.log(res);
    return res.list[0].total
}

使用：

//比如要调用 封装的  管理员登陆接口
import {Login } from "@/request/user"
//点击登录按钮，触发login
async login(data){
            let res = await Login(data)
            if(res.code==200){ //如果登录成功
                
                //res中可以得到用户的登录信息，存起来......
                Message.success("登录成功")
                router.push("/")//跳到首页
            }else{
                Message.error("用户名或密码错误")
            }
        },

2.角色管理模块的 请求层

//role.js
import $axios from "@/common/http"
export async function getRole(){
   
    let res = await $axios.get("/rolelist")
    if(res.code==200){
        return res.list
    }else{
        return []
    }
}

export function addRole(data){
    return $axios.post('/roleadd',data)
}
export function editRole(data){
    return $axios.post('/roleedit',data)
}
export function delRole(id){
    return $axios.post('/roledelete',{id})
}