axios简单的二次封装
import axios from 'axios'
import { Message} from 'element-ui'
import store from '../store' //vuex
import { getToken } from '@/utils/auth' //token // 创建axios实例 const service = axios.create({
//baseURL: "https://www.cnblogs.com", // api的base_url
timeout: 5000 // 请求超时时间
}) //http request 拦截器
service.interceptors.request.use(
config => {
config.headers = {
'Content-Type':'application/x-www-form-urlencoded',
'X-Token':getToken()
}
return config;
},
error => {
return Promise.reject(err);
}
); //响应拦截器即异常处理
service.interceptors.response.use(response => {
console.log(response)
return response
}, err => {
if (err && err.response) { switch (err.response.status) {
case 400:
//console.log('错误请求')
Message({message: '错误请求', type: 'error'});
break;
case 401:
console.log('未授权,请重新登录')
break;
case 403:
console.log('拒绝访问')
break;
case 404:
console.log('请求错误,未找到该资源')
break;
case 405:
console.log('请求方法未允许')
break;
case 408:
console.log('请求超时')
break;
case 500:
console.log('服务器端出错')
break;
case 501:
console.log('网络未实现')
break;
case 502:
console.log('网络错误')
break;
case 503:
console.log('服务不可用')
break;
case 504:
console.log('网络超时')
break;
case 505:
console.log('http版本不支持该请求')
break;
default:
console.log(`连接错误${err.response.status}`)
}
} else {
console.log('连接到服务器失败')
}
return Promise.resolve(err.response)
}) function fromdata(type, url, data) {
return new Promise((reslove, reject) => {
service({
method: type,
url: url,
data: data //java后台用qs转
})
.then(res => {
// store.commit('UPDATE_LOADING', false); //隐藏loading
//这里可以添加指定对应状态码的处理方式,比如登陆过期,res.data.code === '6666' 路由跳转到login
if(res.data.code==0){
reslove(res);
}else{
console.log(res.data.message)
console.log(res)
Message({message: '错误请求', type: 'error'});
}
})
.catch(err => {
//store.commit('UPDATE_LOADING', false); //隐藏loading
reject(err.message);
Message({message: '错误请求', type: 'error'});
//Message.error(e.message);
});
});
} export default fromdata
上文件保存为http.js使用时引入
例子
axios简单的二次封装的更多相关文章
- Vue:对axios进行简单的二次封装
主要做3点: 1.配置一个请求地址前缀 2.请求拦截(在请求发出去之前拦截),给所有的请求都带上 token 3.拦截响应,遇到 token 不合法则报错 // 对 axios 的二次封装 impor ...
- vue项目中对axios的二次封装
近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios' ...
- axios 二次封装
一般项目往往要对 axios 库进行二次封装,添加一些自定义配置和拦截器等 案例 ./service/axios.js 1234567891011121314151617181920212223242 ...
- 原生 Ajax 封装 和 Axios 二次 封装
AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...
- 简单二次封装的Golang图像处理库:图片裁剪
简单二次封装的Golang图像处理库:图片裁剪 一.功能 Go语言下的官方图像处理库 简单封装后对jpg和png图像进行缩放/裁剪的库 二.使用说明 1.首先下载 go get -v -u githu ...
- vue中axios的二次封装
我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建 ...
- 【vue】axios二次封装,更好的管理api接口和使用
在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...
- 使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...
- 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)
前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...
随机推荐
- LUOGU P1313 计算系数 (组合数学)
解题思路 比较简单的题,用二项式定理即可. #include<iostream> #include<cstdio> #include<cstring> #inclu ...
- 杂项-公司:SAMSUNG
ylbtech-杂项-公司:SAMSUNG 三星集团是韩国最大的跨国企业集团,同时也是上市企业全球500强,三星集团包括众多的国际下属企业,旗下子公司有:三星电子.三星物产.三星航空.三星人寿保险等, ...
- Android之相关术语
Dalvik: Android特有的虚拟机,和JVM不同,Dalvik虚拟机非常适合在移动终端上使用! AVD: (android virtual machine):安卓虚拟设备,就是安卓的模拟器 A ...
- LINK : fatal error LNK1104: 无法打开文件“ucrtd.lib”
先说解决方案: 选中项目->右键->属性->常规 -->Windows SDK 改成当前系统的SDK版本,我这边是10.0.15063.0,重新生成即可 下载cefsh ...
- java基础温习 -- Thread
启动线程两种方式: 1. 实现Runnable接口: 2. 继承Thread类. 选用:能使用接口,就不用从Thread类继承. 使用继承的方法不够灵活,从这个类继承了就不能从其他类继承: 实现 ...
- Java对象的存活判断
Java对象的回收是有依据的,普通的方式是计算法,比如被引用,对象计数器➕1,不被引用,➖1,回收的时候,发现是0则清除,但是不能解决两个对象互相被引用的情况,Java采用可达性分析,通过某个对象作为 ...
- 慢日志:mysqlsla
Linux服务器收集到的慢日志文件拿到本地(Windows7)的虚拟机(CentOS6.5)中去分析.首先使用Samba工具配置CentOS和Windows文件共享,然后使用mysqlsla分析慢查询 ...
- springboot 2 修改端口号
springboot 废弃了EmbeddedServletContainerCustomizer ,修改端口,从官方文档上看到的方法, 1 import org.springframework.boo ...
- jQuery3动画+创建元素
一.jQuery的动画 1.jQuery自带的动画 1>变化的是width height opacity display <!DOCTYPE html> <html lang= ...
- opencv读取的彩色图像,数据是GBR而不是RGB
开发久了,容易想当然 直到数据怎么也不对的时候,才想起来查一下手册 三个像素,当然没有这么大的像素,这是放大之后的 数据输出