vue项目-封装API接口

1.在/src/下创建一个js文件 AxiosAsk.js

import Vue from 'vue'
import axios from 'axios'
var vm = '';
Vue.prototype.thisVm = function(_this) {
	vm = _this;
}
const APIASK = (url, type, data) => {
	let hostUrl = JSON.parse(localStorage.LMUrl).hostUrl;
	let ax = {
		method: type,
		url: hostUrl + url,
		headers: {
			"token": data.token
		},
		data: {},
		timeout: 15000
	}
	if (type == 'post') {
		ax.data = data;
	} else if (type == 'get') {
		ax.params = data;
	}
	let res = axios(ax).then((data) => {
        //自定义模块
		if (data.status == 200) {
			if (data.data.code == 400) {
				vm.$message.error(data.data.msg);
			} else if (data.data.code == 402) {
				vm.$router.push({
					path: '/'
				})
			}
		} else {
			vm.$message.error('服务器错误');
		}
        //自定义模块 END
		return data.data
	}).catch((error) => {
		vm.$message.error('网络请求超时');
		return 'NetworkError';
	})
	return res
}
 
export default {
	APIASK
}

2.App.vue

    created() {
        this.thisVm(this);
    }

3.vue页面调用

//页面引入封装接口文件
import $http from '../AxiosAsk'

//调用封装接口
let data = {//传给接口的数据    
    token: this.token
};
let res = $http.APIASK('/login', 'post', data);
Promise.resolve(res).then(data => {
    if (data.code == 0) {
        //接口数据
    }
})