vue中封装中封装axios的方法以及如何使用的方法以及如何使用
封装封装axios
在vue中常用的请求方式就是axios，下面讲解axios的封装方式
第一步，需要引入第一步，需要引入axios
import axios from 'axios'//引入axios
import router from '../router/index'//引入路由
第二步，定义新的第二步，定义新的axios
let instance = axios.create({
timeout:10000,//请求时间超过10000ms就中断
baseURL:'/api',
})
注意注意：这里可将baseURL放入其中，便于代码的统一，也可将其放入main文件中
第三步，设置请求拦截第三步，设置请求拦截
instance.interceptors.request.use(req=>{
let token = sessionStorage.getItem('token')
token && (req.headers['Authorization']=`Bearer ${token}`)
return req
},error => Promise.reject(error))
注意注意：
每次发起请求之前需要获取token，token可以用sessionStorage或localStorage存在本地，也可以在vuex中获取token
如果有token，将token保存在请求的header上，发送给后台验证
token && (req.headers['Authorization']=Bearer ${token}) 也可换成if(token !==undefined){ req.headers['Authorization']=Bearer ${token}}
第四步，请求之后第四步，请求之后
instance.interceptors.response.use(response=>{
response.data.token &&sessionStorage.setItem('token',response.data.token)
return response
},error => {
let _response = error.response
switch (_response.status) {
case 401:
sessionStorage.removeItem('userName')
sessionStorage.removeItem('userId')
sessionStorage.removeItem('loginTime')
sessionStorage.removeItem('token')
sessionStorage.removeItem('power')
alert('身份过期，请重新登录')
return router.push('/login')
case 404: alert('服务器未找到相关资源');
}
return Promise.reject(error.response.data)
})
注意注意：
请求后一般会将token保存在本地
switch 用于处理服务器的报错信息，可根据项目需求酌情添加
第五步，公开第五步，公开
export default instance
第六步，使用第六步，使用
个人习惯于在store中发起请求，因此引用封装好的axios的路径会有些许不同
首先是引用封装好的axios文件
import http from '../http/http'//由于我封装的axios文件名为http，所以这里就沿用了
在actions里调用，以登录为例
actions: {
userLogin({commit},obj){
let userData = {
userName:obj.name,
评论0