三、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,是为了防止有多个不同服务的情况。
三、VUE项目BaseCms系列文章:axios 的封装的更多相关文章
- 一、VUE项目BaseCms系列文章:项目介绍与环境配置
一.项目效果图预览: 二.项目介绍 基于 elementui 写一个自己的管理后台.这个系列文章的目的就是记录自己搭建整个管理后台的过程,希望能帮助到那些入门 vue + elementui 开发的小 ...
- 二、VUE项目BaseCms系列文章:项目目录结构介绍
一. 目录结构截图 二. 目录结构说明 - documents 存放项目相关的文档文件 - api api 数据接口目录 - assets 资源文件目录 - components ...
- Vue 项目实战系列 (一)
最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...
- Vue项目中使用Vuex + axios发送请求
本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...
- vue项目中使用mockjs+axios模拟后台数据返回
自己写练手项目的时候常常会遇到一个问题,没有后台接口,获取数据总是很麻烦,于是在网上找了下,发现一个挺好用的模拟后台接口数据的工具:mockjs.现在把自己在项目中使用的方法贴出来 先看下项目的目 ...
- Vue 项目实战系列 (三)
我们继续前两节的开发.本节教程实现的效果如下: 效果很简单,但是实现起来却要用到Vue的很多知识,下面我们将一步一步的实现这个效果. 首先这些城市的信息都是从后台的server里面获取的,所以我们需要 ...
- Vue 项目实战系列 (二)
上一章节我们已经把项目的初始化工作完成了,接下来我们再来进行具体的代码编写.这一节我们将完成如下的页面. 我们在src/目录下新建一个views文件夹,存放我们的主要页面文件.目录结构如下: cine ...
- Vue管理系统前端系列四组件拆分封装
目录 组件封装 首页布局拆分后结构 拆分后代码 状态管理中添加 app 模块 组件封装 在上一篇记录中,首页中有太多的代码,为了避免代码的臃肿,需要对主要的功能模块拆分,来让代码看起来更简洁,且能进行 ...
- 在vue项目中的axios使用配置记录
默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...
随机推荐
- CocoaPods 详解之----更新篇
CocoaPods 大概是 2011 年出现的开源组件管理工具(目前已支持 Objective-C 和 Swift),近年来普及率越来越高,几乎已是所有 Cocoa 开源项目的标配.另外,很多大点的团 ...
- aplipay支付-app支付之前后端实现
目录 前言 一 前台aplipay实现 1.1 安装0x5e/react-native-alipay 1.2. 配置 1.3. Alipay.pay(orderStr) 二 后端 2.1 服务端sdk ...
- UESTC1961-咸鱼睡觉觉
咸鱼睡觉觉 Time Limit: 1000 MS Memory Limit: 64 MB Submit Status 咸鱼要睡觉觉了! 但那群咕咕有点烦. 咸鱼决定要赶走一些咕咕,使得他们不 ...
- Python爬虫实现抓取腾讯视频所有电影【实战必学】
2019-06-27 23:51:51 阅读数 407 收藏 更多 分类专栏: python爬虫 前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问 ...
- Dubbo源码分析之 SPI(一)
一.概述 dubbo SPI 在dubbo的作用是基础性的,要想分析研究dubbo的实现原理.dubbo源码,都绕不过 dubbo SPI,掌握dubbo SPI 是征服dubbo的必经之路. 本篇文 ...
- 2019年JVM面试都问了什么?快看看这22道面试题!(附答案解析)
一. Java 类加载过程? Java 类加载需要经历一下 7 个过程: 1. 加载 加载是类加载的第一个过程,在这个阶段,将完成一下三件事情: • 通过一个类的全限定名获取该类的二进制流. • 将该 ...
- 一遍文章搞清楚VO、DTO、DO、PO的概念、区别
作者:Cat Qi 概念: VO(View Object):视图对象,用于展示层,它的作用是把某个指定页面(或组件)的所有数据封装起来. DTO(Data Transfer Object):数据传输对 ...
- textarea增加字数监听且高度自适应(兼容IE8)
1.封装方法: var textareaListener = { /*事件监听器兼容 * *attachEvent——兼容:IE7.IE8:不兼容firefox.chrome.IE9.IE10.IE1 ...
- MySQL必知必会-官方数据库表及SQL脚本导入生成
最近在复习SQL语句,看的是MySQL必知必会这本书,但是发现附录中只有表设计,没有表的具体数据.所以在学习相应的语句中体验不是很好,去网上查了数据库的内容,自己慢慢导入到了数据库中.把表放出来作为参 ...
- CCF-CSP题解 201503-4 网络延时
求树的直径. 两遍\(dfs\)就好了. #include <cstdio> #include <cstring> #include <algorithm> #in ...