针对Vue中封装路由的一些理念及实例声明

之前一直对封装路由展露出很大的兴趣，但是一直封装的都是基本封装，觉得层次化不够分明，也不够简便！！！在这里记录一下

又是踩坑的一天...

以前的思路：

import axios from 'axios'

const http = axios.create({

  baseURL: '/api',

  timeout: 10000

})

http.interceptors.request.use( //请求拦截器

config => {

console.log(config);  // 该处可以将config打印出来看一下，该部分将发送给后端（server端）

config.headers.token = '该处可设置token内容';

return config  // 对config处理完后返回，下一步将向后端发送请求

},

error => {  // 当发生错误时，执行该部分代码

    console.log(error); //调试用

    return Promise.reject(error)

}

)

http.interceptors.response.use(  //响应拦截器

response => {  // 该处为后端返回整个内容

const res = response.data;  // 该处可将后端数据取出，提前做一个处理

if ('正常情况') {

return response  // 该处将结果返回，下一步可用于前端页面渲染用

} else {

alert('该处异常');

return Promise.reject('error')

}

},

error => {

console.log(error),

Promise.reject(error)

}

)

export default http

然后把这个js文件引入到main.js文件中，挂载到vue的原型上，之前都是这样做的！简单吧...

### 但是这样肯定是不够完美的  ###

所以今天借鉴了vue element admin 这个专门写后端管理的模板，看了好久，觉得别人的特别好，所以来分享一下！毕竟好东西，肯定是要拿来多参考，多学习的嘛

现在的思路：

理念是这样的：我把axios的请求和响应拦截单独封装进a，所有的用户请求也单独封装为b，在封装的用户请求b中，使用a

大概就是这个意思：话不多说上代码

文件a：

import axios from 'axios'    

import {Message} from 'element-ui'

const http = axios.create({

    baseURL:'/api',

    timeout:5000

})

http.interceptors.request.use((config)=>{ //请求拦截器

    // if (UserModule.token) { //做token验证的

    //    config.headers['X-Access-Token'] = UserModule.token

    // }

    return config

},

(error)=>{

    Promise.reject(error)

})

http.interceptors.response.use((response)=>{ //响应拦截器

    return response

},

(error)=>{

    Message({

        message:error.message,

        type:'error',

    })

    return Promise.reject(error)

})

export default http

文件b：

存放用户请求

import request from '../utils/request'   //引用a  （用了ts的写法）

export const article = ()=>{ //获取所有的公司信息

    return request({

        url:'/article',

        method:'get'

    })

}

export const addarticle = (data:any)=>{ //添加公司信息

    return request({

        url:'/article',

        method:'post',

        data

    })

}

export const articleinfo = (id:string)=>{ //根据id获取指定公司信息

    return request({

        url:`/article/${id}`,

        method:'get'

    })

}

export const removearticle = (id:string)=>{ //根据id删除指定公司信息

    return request({

        url:`/article/${id}`,

        method:'delete'

    })

}

export const updatearticle = (id:string,data:any)=>{ //根据id更新指定公司信息

    return request({

        url:`/article/${id}`,

        method:'put',

        data

    })

}

不需要挂载到Vue的原型上，哪里需要哪里引用...

通过按需引入的方法就可以了，我认为这样最大的好处就是，条理清楚，便于维护

也是初入介绍，如果有不对的地方，希望您多多指正，每一次的错误，都是一次进步，毕竟我渴望进步