Vue的路有拦截与axios的封装

一丶首先我们先创建api与utils两个文件夹

二丶api文件夹里面新建文件api.js

 import request from "../utils/http"
 import qs from "qs"

 //getdata是我自己封装的,名字可以随意写，按照自己的习惯写即可.
 export function getdata(parmas){
     return request({
         //url写暴露出来的接口
         url:"https://blogs.zdldove.top/Home/Apis/listWithPage",
         //method是请求的方式
         method:"post",
         //注意：如果我们请求方式是post，那么下面这一行需要转换一下,具体看需求,如果是get请求直接写一个parmas即可
         data:qs.stringify(parmas)
     })
 }

三丶下面写utils文件夹里面的内容

　　1创建http.js文件,代码如下

　　

 import axios from "./request"
 let baseURL = ""

 let ajax = function(config){
     config.url = baseURL + config.url

   return new Promise((resolve,reject)=>{
       var options = {
           method: config.method,
           headers: {
               'Content-Type': 'application/x-www-form-urlencoded',
           },
           data: config.data
       }
       axios(config.url, options).then((res)=>{
           resolve(res)
       })
   })
 }

 export default ajax;

　　2创建request.js文件，代码如下

 import axios from "axios"
 import router from "../router"

 //axios配置

 axios.defaults.timeout = 5000
 // axios.defaults.baseURL = ""
 axios.defaults.baseURL = "http://localhost:8080/"  //地址
 //http request 拦截器

 axios.interceptors.request.use(
     config => {
         return config
     },
     err => {
         return Promise.reject(err)
     }
 )

  //http response 拦截器

  axios.interceptors.response.use(
      response => {
          return response
      },
      error => {
          if(error.response) {
             switch (error.response.status){
                 case 404:
                         localStorage.removeItem('username');
                         router.currentRoute.path !== "/" &&
                         router.replace({
                             path:"/"
                         })
             }
          }
          return Promise.reject(error.response.data)
      }
  )
  export default axios

四丶页面请求数据,代码如下

 <template>
   <div class="home">
      {{list}}
   </div>
 </template>

 <script>
 import {getdata} from "../api/api"
 export default {
          data(){
              return{
                  list:[],

              }
          },
         created(){
             getdata().then((res)=>{
                 this.list=res
             })
         },
         methods:{

         }
 }
 </script>

由于能力有限，上面是个人的全部理解.