三、VUE项目BaseCms系列文章:axios 的封装
项目开发中 ajax 是不可缺少的,一个好的封装可以减少我们很多的重复代码,维护也更方便。在 vue 开发中我们用的比较多的就是 axios。下面代码是项目中用到的 axios 的封装。
http.js
/** * 描述: axios封装,方便使用 */ import axios from 'axios' import router from '../router' import { Message } from 'element-ui' // 提示 const tip = msg => Message.error(msg) // 跳转到登录页 const toLogin = () => { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) } // 错误统一处理 const errorHandle = (status, other) => { switch (status) { // 未授权,请登陆 case 401: toLogin() break // 登录过期,清除token,跳转到登录页 case 403: tip('登录过期,请重新登录!') localStorage.removeItem('token') setTimeout(() => { toLogin() }, 1000) break // 未找到资源 case 404: tip('请求的资源不存在!') break // 其他状态码 default: console.log(other) } } // 实例对象 let instance = axios.create({ timeout: 6000, headers: { 'Content-Type': 'application/json' } }) // 请求拦截器 instance.interceptors.request.use( config => { // 登录流程控制中,根据本地是否存在token判断用户的登录情况 // 但是即使token存在,也有可能token是过期的,所以在每次的请求头中携带token // 后台根据携带的token判断用户的登录情况,并返回给我们对应的状态码 // 而后我们可以在响应拦截器中,根据状态码进行一些统一的操作。 const token = localStorage.getItem('token') token && (config.headers.Authorization = token) return config }, error => Promise.error(error) ) // 响应拦截器 instance.interceptors.response.use( // 请求成功 res => { if (res.data.code === 200) { return Promise.resolve(res) } else { tip(res.data.message) return Promise.reject(res) } }, // 请求失败 error => { const { response } = error if (response) { // 请求已发出,但状态码不在 2XX 的范围 errorHandle(response.status, response.data.message) return Promise.reject(response) } else { tip('请求未响应,超时或断网!') return Promise.reject(error) } } ) export default instance
注:
1. 上面代码依赖了 elementui 框架的 Message 组建,用于提示错误消息
2. 之所以没有为 实例对象 instance 配置 baseUrl,是为了防止有多个不同服务的情况。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步