vue中封装基础axios以及接口调用

创建一个utils文件夹,再新建一个service.js文件

import axios from 'axios'
import router from '@/router/routers'
import store from '../store'
import { Notification,MessageBox  } from 'element-ui'
import { getToken } from '@/libs/utils' //自定义的token获取方法
const baseUrl =  {
    dev: 'http://xx.xx.xx.xx',//开发环境
    pro: 'http://xx.xx.xx.xx'//生产环境
}
// 创建axios实例
const service = axios.create({
    baseURL: process.env.NODE_ENV === 'production' ? baseUrl.pro : baseUrl.dev, // api 的 base_url
    timeout: 7000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
    config => {
        if (getToken()) {
            config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
        }
        config.headers['Content-Type'] = 'application/json'
        return config
    },
    error => {
        Promise.reject(error)
    }
)
// response 拦截器
service.interceptors.response.use(
    response => {
        const code = response.status
        if (code < 200 || code > 300) {
            Notification.error({
                title: response.data
            })
            return Promise.reject('error')
        } else {
            const { data, status } = response
            return { data, status }
        }
    },
    error => {
        let code = 0
        try {
            code = error.response.status
        } catch (e) {
            if (error.toString().indexOf('Error: timeout') !== -1) {
                Notification.error({
                    title: '网络请求超时',
                    duration: 5000
                })
                return Promise.reject(error)
            }
        }
        if (code) {
            if (code === 401) {
                MessageBox.confirm(
                    '登录状态已过期，请重新登录',
                    '系统提示',
                     {
                         confirmButtonText: '重新登录',
                         cancelButtonText: '取消',
                         type: 'warning'
                     }
                 ).then(() => {
                     store.dispatch('LogOut').then(() => {//调取Vuex中退出登录接口
                         location.reload() // 为了重新实例化vue-router对象 避免bug
                     })
                })
            } else if (code === 403) {
                router.push({ path: '/401' })
            } else {
                const errorMsg = error.response.data
                if (errorMsg !== undefined) {
                    Notification.error({
                        title: errorMsg,
                        duration: 5000
                    })
                }
            }
        } else {
            Notification.error({
                title: '接口请求失败',
                duration: 5000
            })
        }
        return Promise.reject(error)
    }
)
export default service

src目录下创建api文件夹，文件夹内新建index.js、demo.js文件

demo.js

import request from '@/libs/service'//引入封装好的axios

export const demo = {
    getTableInfo(params) {
        return request({
            url: '/xxxx', //接口路径
            method: 'get',
            params
        })
    }
}

index.js建立此文件是为将所有的接口文件都引入进来

import {demo} from './demo'

export default {
    demo
}

在main.js中引入

import api from './api'

Vue.prototype.$api = api//创建全局变量

至此，无需引入接口文件，即可在任意文件内调取任意接口

async getData() {
    try {
        const data = {
            pageNum:1,
            pageSize:10
        }
        let res = await this.$api.demo.getTableInfo(data)
        console.log(res)
    } catch (e) {
        console.log(e.response.data)
    }
}