cnpm install axios --save-dev
<template>
<div class="about">
<h1>vue中axios中拦截器的使用</h1>
<button @click="handleClick">按钮</button>
<div v-if="loading">loading...</div>
<p v-else>{
{ title }}</p>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from ‘《组件路径》‘
import axios from 'axios'//引入axios
export default {
data() {
return {
title:'',
loading:true
};
},
methods: {
handleClick(){
axios.get('http://jsonplaceholder.typicode.com/todos/1').then((res)=>{
this.title=res.data.title;
})
},
},
created() {
axios.interceptors.request.use((config)=>{
//请求拦截
this.loading=true;
return config;
})
axios.interceptors.response.use((config)=>{
//响应拦截
this.loading=false;
return config;
})
}
}
</script>
<style scoped>
</style>