vue分享个人封装axios

1.引入axios

npm i axios --save

2.新建index.js

import axios from 'axios'

import { Message, MessageBox } from 'element-ui'
import router from '@/router'
//接口
export const baseURL = 'https://'

//请求拦截
axios.interceptors.request.use(config => {
    let token = localStorage.token
    if (token) {
        config.headers.Token = token
    }
    return config
}, error => {
    return Promise.reject(error)
})

let timer = null

//响应拦截器
axios.interceptors.response.use(res => {
    if (res.data.code === 110) {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            MessageBox.confirm(`${ res.data.msg }，请重新登录！` || '请求失败！请于管理员联系！', '提示', {
                type: 'warning'
            }).then(() => {
                localStorage.clear()
                sessionStorage.clear()
                router.replace({ name: 'login' }).then(() => {
                    location.reload()
                })
            })
        }, 500)
    }
    // 稍后可以做一些处理
    return res
}, error => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
        Message({
            type: 'error',
            message: error.message || '请求失败！请于管理员联系！',
            duration: 3000,
            showClose: true
        })
    }, 500)
    return Promise.reject(error)
})

function Axios (options) {
    const config = {
        timeout: 35000,
        baseURL,
        ...options
    }
    config.headers = {
        'Content-Type': 'application/json'
    }
    return new Promise((resolve, reject) => {
        axios(config).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}


router.beforeEach((to, form, next) => {
    if (to.fullPath.includes('/login'))  return next()
    if (!localStorage.token) {
        Message({
            type: 'error',
            message: '您的身份信息有误，请重新登录！',
            duration: 5000,
            showClose: true
        })
        return next({ name: 'login', replace: true })
    }
    next()
})
export default {
    get: ({ url, data, params }) => Axios({ method: 'GET', url, data, params }),
    post: ({ url, data, params }) => Axios({ method: 'POST', url, data, params }),
    put: ({ url, data, params }) => Axios({ method: 'PUT', url, data, params }),
    delete: ({ url, data, params }) => Axios({ method: 'DELETE', url, data, params })
}

3.新建请求api.js文件

import request from './'


// 登录
function login (data, params) {
    return request.post({
        url: '/login',
        data,
        params
    })
}




const userApi = {
    // 添加
    add: (data, params) => request.post({ url: '/请求地址', data, params }),
    // 编辑
    update: (data, params) => request.post({ url: '/请求地址', data, params }),
    // 获取列表
    getPageList: (data, params) => request.post({ url: '/请求地址', data, params }),
    // 获取树形下拉
    getTreeList: (data, params) => request.post({ url: '/请求地址', data, params }),
    // 删除
    // delete: (data, params) => request.post({ url: '/请求地址', data, params }),
}

export default {
    login,
    userApi
}

4.main.js引入api.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

import Api from './api/api.js'



Vue.config.productionTip = false
//关键代码，挂载在vue原型上
Vue.prototype.$api = Api
new Vue({
    store,
    router,
    render: h => h(App)
}).$mount('#app')

这样的话我们在请求接口时就可以直接使用：

//params参数
this.$api.userApi.getPageList(params)