vue项目中axios的封装、拦截及使用

创建constant.js文件保存baseUrl

创建constant.js(随意) 保存baseUrl
var baseUrl = process.env.NODE_ENV === 'production' ? 'http://生产环境地址' : 'http://开发环境地址'
export default baseUrl

创建request.js文件创建请求

创建request.js
// 引入axios
import axios from 'axios'
// 引入baseUrl
import baseUrl from '@/api/constant'
// 引入iview 全局提示
import {
    Message
} from 'view-design'
axios.defaults.withCredentials = true;
// 创建服务
const service = axios.create({
    timeout: 1000000,  // request timeout
    baseURL: baseUrl, // url = base url + request url
    headers: {
        'Content-type': 'application/json'
    },
    withCredentials: true // send cookies when cross-domain requests
});
// 请求拦截器
service.interceptors.request.use(
    (config) => {
        config.url = baseUrl + config.url;
        return config;
    },
    err =>{ Promise.reject(err); console.log(err)},
);
// 响应拦截
service.interceptors.response.use((response) => {
    if(!response.data.success) {
    	// code判断,做出相对应操作
       if (response.code === '401'){
            Message.error(response.data.msg || response.data.message)
        }  else if (response.data.code === '500'){
            Message.error(response.data.msg + "请重新登录!"|| response.data.message + "请重新登录!")
            window.location.href = '/'
        }
        else {
            return response;
        }
        if (response.data.code !== 200) {
            Message.error(response.data.message)
        }
   		} else {
        	return response
  		}
});
// 导出
export default service

创建tools.js封装接口

创建tools.js文件 里面是封装的接口
// 引入request
import request from '../utils/request'
// 引入qs
import qs from "querystring";
// 后台给的接口的封装
// 获取部门下人员
// data (requre参数) data1(body体)
function searchUserInDept(data, data1) {
    return request({
        url: '/user/searchUserInDept?' + qs.stringify(data),
        method: 'post',
        data: data1
    })
}
// 获取当前用户菜单
function getWebMenus() {
    return request({
        url: '/getWebMenus',
        method: 'post',
    })
}
// 导出
export {
	searchUserInDept,
	getWebMenus
}

在组件中使用

<script>
// 引入
 import {
        searchUserInDept,
		getWebMenus
    } from '@/utils/tools'

mounted() {
           // 获取当前用户菜单
            getWebMenus().then((res) => {
                if (res.data.success){
					console.log(res)
                } else {
            	    console.log(res.data.msg)
                }
            }).catch((error) => {
         		 console.log(error)
       	    });
			 //获取部门下人员
			 searchUserInDept(data,data1).then((res) => {
			 	if(res.data.success){
			 		console.log(res)
			 	} else {
			 		 console.log(res.data.msg)
			 	}
			}).catch((error) => {
          		console.log(error)
            });
 }
</script>

最后

request.js和tools.js文件我是创建在utils文件夹中的,constant.js创建在api文件夹中。
这仅仅是我个人的封装习惯,仅供参考,如果能帮助到别人那就很好了。如有错误请多指正,谢谢!