Vue的路由拦截与axios的封装
一丶首先我们先创建api与utils两个文件夹
二丶api文件夹里面新建文件api.js
1 import request from "../utils/http" 2 import qs from "qs" 3 4 //getdata是我自己封装的,名字可以随意写，按照自己的习惯写即可. 5 export function getdata(parmas){ 6 return request({ 7 //url写暴露出来的接口 8 url:"https://blogs.zdldove.top/Home/Apis/listWithPage", 9 //method是请求的方式 10 method:"post", 11 //注意：如果我们请求方式是post，那么下面这一行需要转换一下,具体看需求,如果是get请求直接写一个parmas即可 12 data:qs.stringify(parmas) 13 }) 14 }
三丶下面写utils文件夹里面的内容
1创建http.js文件,代码如下
1 import axios from "./request" 2 let baseURL = "" 3 4 let ajax = function(config){ 5 config.url = baseURL + config.url 6 7 8 return new Promise((resolve,reject)=>{ 9 var options = { 10 method: config.method, 11 headers: { 12 'Content-Type': 'application/x-www-form-urlencoded', 13 }, 14 data: config.data 15 } 16 axios(config.url, options).then((res)=>{ 17 resolve(res) 18 }) 19 }) 20 } 21 22 export default ajax;
2创建request.js文件，代码如下
1 import axios from "axios" 2 import router from "../router" 3 4 //axios配置 5 6 axios.defaults.timeout = 5000 7 // axios.defaults.baseURL = "" 8 axios.defaults.baseURL = "http://localhost:8080/" //地址 9 //http request 拦截器 10 11 axios.interceptors.request.use( 12 config => { 13 return config 14 }, 15 err => { 16 return Promise.reject(err) 17 } 18 ) 19 20 21 //http response 拦截器 22 23 axios.interceptors.response.use( 24 response => { 25 return response 26 }, 27 error => { 28 if(error.response) { 29 switch (error.response.status){ 30 case 404: 31 localStorage.removeItem('username'); 32 router.currentRoute.path !== "/" && 33 router.replace({ 34 path:"/" 35 }) 36 } 37 } 38 return Promise.reject(error.response.data) 39 } 40 ) 41 export default axios
四丶页面请求数据,代码如下
1 <template> 2 <div class="home"> 3 {{list}} 4 </div> 5 </template> 6 7 <script> 8 import {getdata} from "../api/api" 9 export default { 10 data(){ 11 return{ 12 list:[], 13 14 } 15 }, 16 created(){ 17 getdata().then((res)=>{ 18 this.list=res 19 }) 20 }, 21 methods:{ 22 23 } 24 } 25 </script>
由于能力有限，上面是个人的全部理解.
