Vue接口的封装

在http/index.js页面

let instance = axios.create({
    baseURL: "xxxxxxxxxxxx",
    timeout: 3000,
})

// 请求拦截器
instance.interceptors.request.use(
    config => {
        // 每次发送请求之前判断是否存在token
        // 如果存在，则统一在http请求的header都加上token
        // 这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
        localStorage.token && (config.headers.Authorization = localStorage.token)
        return config
    },
    error => {
        return Promise.error(error)
    })

// 响应拦截器
axios.interceptors.response.use(response => {
    return response
}, error => {
    return error
})


// 导出httpServe请求方法
export const httpServe = (path, params = {}, method = "get", data = {}) => {
    return new Promise((resolve, reject) => {
        instance({
            method,
            url: path,
            params,
            data
        }).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

在http/request.js页面

// 登录
export const loginPost = (path, data) => httpServe(path,{}, 'post', data)
// 左侧导航栏
export const menuGet =(path,params)=>httpServe(path,params)
// 用户列表
export const usersGet =(path,params)=>httpServe(path,params)
// 添加用户
export const addusersPost=(path, data) => httpServe(path,{}, 'post', data)

登录页面先导入request页面 然后直接使用封装好的请求即可