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>

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