axios二次封装，api的统筹管理

对axios进行二次封装，统筹管理api， 项目中配合async await使用。
1、在src/api下创建request.js文件，对axios进行封装。

// request.js代码
import axios from 'axios'
import {throwErr} from '@/utils/throwErr.js' //utils 捕捉服务端http状态码的方法
import store from '@/js/Store.js' //引入vuex的相关操作
import {Message} from 'element-ui' //element Toast的提示
import {showLoading,hideLoading} from '@/utils/loading'; //显示、关闭loading

let showLoding = true;
axios.interceptors.request.use((config) => {
	// 请求拦截
	if (showLoding) {
		//showLoading();//显示loading
	}
	return config
}, error => {
	return Promise.reject(error)
})
// 添加响应拦截器
axios.interceptors.response.use(
	response => {
		//hideLoading();//关闭loading
		if (response.data.status == true || response.status == 200) { //服务端定义的响应status码为true时请求成功
			return Promise.resolve(response.data) //使用Promise.resolve 正常响应
		} else {
			return Promise.reject(response.data)
		}
	},
	error => {
		//hideLoading();//关闭loading
		if (error && error.response) {
			let res = {}
			res.code = error.response.status;
			res.msg = throwErr(error.response.status, error.response) //throwErr 捕捉服务端的http状态码 定义在utils工具类的方法
			return Promise.reject(res)
		}
		return Promise.reject(error)
	}
)
export default function request(method, url, data,loding ) { //暴露 request
	//封装RESTful API的各种请求方式 以 post get delete为例
	method = method.toLocaleLowerCase() //将method转换为小写
	if (loding == undefined) {
	//判断是否需要loading
		showLoding = true;
	} else {
		showLoding = loding;
	}
	if (method === 'post') {
			return axios.post(url, data)
				.then((res) => {
					return successState(res);
				})
				.catch((response) => {
					return errorState(response);
				})
		} else if (method === 'get') {
			return axios.get(url, {
					params: data
				})
				.then((res) => {
					return successState(res);
				})
				.catch((response) => {
					return errorState(response);
				})
		} else if (method === 'delete') {
			return axios.delete(url, {
					params: data
				})
				.then((res) => {
					return successState(res);
				})
				.catch((response) => {
					return errorState(response);
				})
		}
}
// 封装数据返回成功提示函数---------------------------------------------
function successState(response) {
	if (response.status == true) {
			Message({
				duration: 1500,
				message: response.msg,
				type: 'success'
			});
		} else {
			Message({
				showClose: true,
				message: response.msg,
				type: 'error'
			});
		}
	return response;
}


// 封装数据返回失败提示函数--------------------------------------------------
function errorState(res) {
	// 统一判断后端返回的错误码(错误码与后台协商而定)
	if (res.code == 401) {
	//判断是否已登录，未登录做出相应的操作
		//store.commit('CHANGE_LOGIN_DIALOG_STATUS', true);
	} else {
		Message({
				duration: 5000,
				showClose: true,
				message: res.msg,
				type: 'error'
			});
	};

	return res;
}

2、创建src/api/axiosApi.js文件，统筹管理api

// axiosApi.js代码
import request from './request' //引入axios的封装方法
export default {
    install: function(Vue) {
        Vue.prototype.getAxios = (url, params, loding) => request('GET', url, params,loding)
        Vue.prototype.postAxios = (url, params, loding) => request('POST', url, params,loding)
        Vue.prototype.delectAxios = (url, params, loding) => request('DELECT', url, params,loding)
        // Vue.prototype.activityList = (params,loding) => request('post', 'activity/activityList', params,loding) //也可以写具体的请求路径，在使用时直接通过this.activityList使用
     }
 }

3、在main.js中引入

// main.js代码片段
import axiosApi from './api/axiosApi.js'
Vue.use(axiosApi)

4、在项目中结合async/await使用

// axios请求代码片段
async getData(){
	// await 必须配合async 使用
	let params={
		"pageIndex":1,
		"pageSize":10
	};
	let res=await this.postAxios('/activity/activityList',params,true);
	//await 等请求成功后才会执行下面的代码
	console.log(res)
	}

5、utils/throwErr.js捕捉服务端http状态码的方法，根据情况决定是否需要，如果不需要记得修改request.js文件中用到throwErr的地方，避免报错。

//axios捕错，错误码与后台协商而定
export const throwErr = (code, response) => {
	let msg=response.data.msg;
  let message = '请求错误';
  switch (code) {
    case 400:
      message = '请求错误'
      break
    case 401:
      message = '未授权，请登录'
      break
    case 403:
      message = '拒绝访问'
      break
    case 404:
      message = `请求地址出错: ${response.config.url}`
      break
    case 408:
      message = '请求超时'
      break
    case 500:
      message = '服务器内部错误'
      break
    case 501:
      message = '服务未实现'
      break
    case 502:
      message = '网关错误'
      break
    case 503:
      message = '服务不可用'
      break
    case 504:
      message = '网关超时'
      break
    default:
  }
	let curMsg = msg?msg:message;
  return curMsg
}