VUE axios 封装报错 TypeError: this.$http.get is not a function

1、封装

axioshttp.js

import axios from 'axios';

const requests = axios.create({
	baseURL:'http://localhost:8000/',
	timeout:600 //请求超时时间
})

//错误处理函数

const err = (error) =>{
	if(error.response){
		const data = error.response.data;
		if(error.response.status === 403){
			Notify({type:'danger',message:data.message||data.msg});
		}
		if(errsor.response.status === 401){
			Notify({type:'danger',message:'你没有权限.'});
		}
	}
	return Promise.reject(error);
}

//request interceptor 请求拦截器
requests.interceptors.request.use((config)=>{
	// localStorage.getItem(key);//获取指定key本地存储的值
	// localStorage.setItem(key,value);//将value存储到key字段
	// localStorage.removeItem(key);//删除指定key本地存储的值
	const token = localStorage.getItem('token');
	if(token){
		config.headers['token'] = token;
	}
	return config;
},err)
//response interceptor 接收拦截器
requests.interceptors.response.use((response)=>{
	const res = response.data;
	if(res.code !== 0&&res.code !==200){
		if(res.code === 410||res.code === 403||res.code === 999){
			Notify({type:'danger',message:'请登录'});
		}
		return Promise.reject('error');
	}else{
		return res;
	}	
},err);
export default{
	requests
}

2、引入main.js

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import requests from './components/axioshttp.js';

Vue.prototype.rq = requests;
Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

3、使用

<template>
	<div class="power">
		<div id="the_left">
			<Aside></Aside>
		</div>
		<div id="the_center" @mousedown="get_width($event)"></div>
		<div id="the_right">
			<TableData :table_data = 'tableData'></TableData>
		</div>
	</div>
</template>

<script>
	import Aside from './aside/aside.vue'
	import TableData from './content/table_data.vue'
	export default{
		name:'Power',
		components:{
			Aside,
			TableData
		},
		data(){
			return {
				tableData:[],
				isActive: true
			}
		},
		methods:{
			// get_con_data(){
			// 	this.rq.get('/power').then(res => {
			// 		console.log('test')
			// 		this.tableData = res.data;
			// 		console.log(res.data)
			// 	})
			// }
			get_con_data(){
				this.rq.requests.get('/power').then(res => {
					console.log('test')
					this.tableData = res.data;
					console.log(res.data)
				})
			}
		},
		created() {
			console.log(this.rq);
			this.get_con_data();
		}
	}
</script>

<style scoped="scoped">
	@import '../../assets/css/base.css';
</style>

4、报错

TypeError: this.rq.get is not a function
因为这里发现报错内容是,this.rq.get is not a function ,所以怀疑是axios这个对象的问题，所以在第三步的时候打印出来

created() {
	console.log(this.rq);
	this.get_con_data();
}

然后发现 this.rq 确实没有get函数，get函数在 this.rq.requests之下，所以将第三步的请求换成

get_con_data(){
				this.rq.requests.get('/power').then(res => {
					console.log('test')
					this.tableData = res.data;
					console.log(res.data)
				})
			}

程序正常，问题解决