二次封装axios，拦截用户信息，增加请求进度条

本文主要是介绍二次封装axios，拦截用户信息，增加请求进度条，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、二次封装axios、让用户不孤单
import axios from 'axios'//引入axios
import nprogress from 'nprogress'//引入nprogress进度条插件
import 'nprogress/nprogress.css'//引入进度条样式
//import Cookies from 'js-cookie'
//请求前

axios.interceptors.request.use((config)=>{

nprogress.start();//启动进度条
})
//可以在这里做一些拦截的操作
//例如拦截登录者的身份信息，来确定权限
//举例：拦截cookies里的message
//config.headers.Authorization=Cookies.get('message')
return config//必须返回config
})
//请求完成
axios.interceptors.response.use((data)=>{
//关闭进度条
nprogress.done();
return data//同样必须返回data
})
//抛出封装好的axios
export default axios
})

二、vue网络请求
vue脚手架配置代理
配置单个代理
在vue.config.js中添加如下配置
devServer:{
proxy:'http://localhost:5000'
}
优点：配置简单，请求资源时直接发给前端8080即可
缺点：不能配置多个代理，不能灵活的控制请求是否走代理
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先配置前端资源）

配置多个代理
编写vue.config.js配置具体代理规则
module.exports={
devServer:{
proxy:{
'/api1':{
//匹配所有以'/api'开头的请求路径
target:'http://localhost:5000',//代理目标的基本路径
changeOrigin:true,
//把路径的/api1替换为空串
pathRewrite:{'^/api':''},
},
'/api2':{
//匹配所有的以'/api2'开头的请求路径
target:'http://localhost:5001',
changeOrigin:ture,
pathRewrite:{'^/api2':''},
}
}
}
}
changeOrigin 设置为 true 时，服务器收到的请求头中的 host：localhost:5000
changeOrigin 设置为 false 时，服务器收到的请求头中的 host：localhost:8080
changeOrigin 默认为 true

这篇关于二次封装axios，拦截用户信息，增加请求进度条的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！