VUE axios 封装报错 TypeError: this.$http.get is not a function
1、封装axioshttp.jsimport axios from 'axios';const requests = axios.create({baseURL:'http://localhost:8000/',timeout:600 //请求超时时间})//错误处理函数const err = (error) =>{if(error.response){const data = error.
·
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)
})
}
程序正常,问题解决
更多推荐
已为社区贡献1条内容
所有评论(0)