三、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 ' ...
随机推荐
- Dubbo源码分析之 SPI(一)
一.概述 dubbo SPI 在dubbo的作用是基础性的,要想分析研究dubbo的实现原理.dubbo源码,都绕不过 dubbo SPI,掌握dubbo SPI 是征服dubbo的必经之路. 本篇文 ...
- PYTHON5000:CMOS图象传感器演示
http://www.onsemi.cn/PowerSolutions/supportVideo.do?docId=1002896
- httpBasic 认证的URL访问
httpBasic 认证 要在发送请求的时候添加HTTP Basic Authentication认证信息到请求中,有两种方法: 1.在请求头中添加Authorization: Authorizati ...
- java8-StreamAPI之collection归约操作
一说明 经过前一篇的StreamAPI学习,基本的流操作我相信大家都熟练于心了,那么今天是要详细解析一下收集器(collect)这么API 前提要区分,collect(StreamAPI)与coll ...
- 《Java Spring框架》Spring切面(AOP)配置详解
1. Spring 基本概念 AOP(Aspect Oriented Programming)称为面向切面编程,在程序开发中主要用来解决一些系统层面上的问题,比如日志,事务,权限等待,Struts2 ...
- 《Java基础知识》Java集合(Map)
Java集合主要由2大体系构成,分别是Collection体系和Map体系,其中Collection和Map分别是2大体系中的顶层接口. 今天主要讲:Map主要有二个子接口,分别为HashMap.Tr ...
- python探索微信朋友信息
一.itchat itchat是一个开源的微信个人号接口,这一次就用它来来玩玩. 在使用之前,先下载,老规矩通过 pip install itchat 即可安装. 想要获取朋友圈信息,只需要几行代码就 ...
- 流分析 Stream Analytics-实时数据流式处理,可处理来自数百万台 IoT 设备的数据
典型的物联网架构中,有实时数据分析的需求,在Azure中,流分析(stream analytics)就是这样的服务,它可以存在云中或者部署到边缘设备上. 流分析的基本概念: https://v.qq. ...
- python获取淘宝登入cookies
重点:去新浪微博登入接口登入 一.代码 # coding=utf-8 import requests from selenium.webdriver.common.by import By from ...
- Maven 项目在 Eclipse 的创建配置
第1步 New 菜单 Other.. -> Maven -> Maven Project ,然后单击 Next .如下图所示 第2步 在New Maven Project向导中,选择Cre ...