创建目录utils , 在里面创建requests.js文件,写入

import axios from 'axios'
import qs from 'qs';
import {
	Message
} from 'element-ui';
// 创建新的axios实例，
const service = axios.create({
	// baseURL: process.env.BASE_API,
	baseURL: "http://xxxxxxxx.com/api/",
	// 超时时间 单位是ms
	timeout: 5 * 1000
})
// 请求拦截器
service.interceptors.request.use(config => {
	// config.data = JSON.stringify(config.data); //数据转成json格式
	config.data = qs.stringify(config.data); //数据转成键值对格式
	return config
}, error => {
	Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(response => {
	response.datas = response.data
	//接收到响应数据并成功后的一些公共的处理等
	response.code = response.data.code
	response.msg = response.data.msg
	response.data = response.data.data
	return response
}, error => {
	// 接收到异常响应
	if (error && error.response) {
		//根据响应嘛处理
		switch (error.response.status) {
			case 400:
				error.message = '错误请求'
				break;
			case 401:
				error.message = '未授权，请重新登录'
				break;
			case 403:
				error.message = '拒绝访问'
				break;
			case 404:
				error.message = '请求错误,未找到该资源'
				break;
			case 405:
				error.message = '请求方法未允许'
				break;
			case 408:
				error.message = '请求超时'
				break;
			case 500:
				error.message = '服务器端出错'
				break;
			case 501:
				error.message = '网络未实现'
				break;
			case 502:
				error.message = '网络错误'
				break;
			case 503:
				error.message = '服务不可用'
				break;
			case 504:
				error.message = '网络超时'
				break;
			case 505:
				error.message = 'http版本不支持该请求'
				break;
			default:
				error.message = `连接错误${error.response.status}`
		}
	} else {
		// 超时处理
		if (JSON.stringify(error).includes('timeout')) {
			// Message.error('服务器响应超时，请刷新当前页')
		}
		error.message = '服务器错误!'
	}

	Message.error(error.message)
	
	return Promise.resolve(error.response)
})
export default service

在utils目录中创建http.js文件 , 写入

import requests from './requests'
import {
	Message
} from 'element-ui';

const http = {
	/**
	 * methods: 请求
	 * @param method 
	 * @param url 请求地址 
	 * @param params 请求参数
	 * @param header 请求头
	 */
	request(method, url, params, header={
		'Content-Type': 'application/x-www-form-urlencoded', //配置请求头
	}) {
		const config = {
			method: method,
			url: url,
			headers:header
		}
		//获取AdminToken
		const AdminToken = localStorage.getItem("AdminToken");
		if (AdminToken != null) {
			config.headers.AdminToken = AdminToken; //AdminToken携带在请求头中
		}
		if (params) {
			if (method == 'post') {
				config.data = params
			} else {
				config.params = params
			}
		}
		return requests(config)
	},
	/**
	 * 对返回数据进行处理
	 * @param {object} request 请求对象
	 * @param {function} successFun 返回状态码 code== 200的回调方法
	 * @param {function} errorFun   返回状态码 code!= 200的回调方法
	 */
	resHandle(request,successFun=false,errorFun=false){
		request.then((response) => {
			if(response){
				if (response.code == 200) {
					if(successFun){
						successFun(response)
					}
				}else if(response.code == 501){
					localStorage.removeItem("AdminToken")
					localStorage.removeItem("AdminUser")
				} else {
					Message.error({
						duration:1000,
						message:response.msg,
						onClose:function(){
							if(errorFun){
								errorFun(response)
							}
						}
					});
				}
			}
		})
	}
}
export default http

封装Api接口方法 , 封装的api文件放在api目录下

AdminUserApi.js接口方法

import http from '../utils/http'

export function list(params,successFun,errorFun) {
	http.resHandle(http.request('post', 'adminuser/list', params), successFun, errorFun);
}
export function create(params,successFun,errorFun) {
	http.resHandle(http.request('post', 'adminuser/create', params), successFun, errorFun);
}
export function update(params,successFun,errorFun) {
	http.resHandle(http.request('post', 'adminuser/update', params), successFun, errorFun);
}
export function findform(params,successFun,errorFun) {
	http.resHandle(http.request('post', 'adminuser/findform', params), successFun, errorFun);
}
export function del(params,successFun,errorFun) {
	http.resHandle(http.request('post', 'adminuser/delete', params), successFun, errorFun);
}

在.vue文件中可直接import引入封装的接口方法进行调用 , 也可以注册一个容器变量进行动态require加载对应接口文件来调用方法

在api目录中创建Api.js

//api容器
//require 值拷贝 直接调用
const Api = {
	newApi(path){
		return require('./'+path+'Api')//传入参数可以为相对路径或者绝对路径
	}
}

export default Api

在main.js引入Api.js , 注册$Api全局变量

绑定对应接口文件

调用接口方法

//添加
this.$bind.AdminUser.create(this.ruleForm,function(res){
	thas.FormSubmitNotify(res,formName)
})
//更新
this.$bind.AdminUser.update(this.ruleForm,function(res){
	thas.FormSubmitNotify(res)
})
//删除
this.$bind.AdminUser.del({
	id:row.id
},function(res){
	thas.$notify({
		type: 'success',
		title: '提示',
		duration:1500,
		message:res.msg,
		onClose:function(){
			thas.tableData.splice(index,1)
		}
	})
})
//查询
this.$bind.AdminUser.findform({id:this.userid},function(res){
	if(res.data.isEdit){
		thas.ruleForm = res.data
	}else{
		thas.ruleForm.role = res.data.role
	}
})