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