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 P1337 [JSOI2004]平衡点 / 吊打XXX(模拟退火)
传送门 解题思路 学习了一下玄学算法--模拟退火,首先要求平衡处,也就是求势能最小的地方,就是求这个点到所有点的距离*重量最小.剩下的几乎是模拟退火的板子了. #include<iostream ...
- Quartz:目录
ylbtech-Quartz:目录 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbtec ...
- PAT甲级——A1091 Acute Stroke【30】
One important factor to identify acute stroke (急性脑卒中) is the volume of the stroke core. Given the re ...
- WhaleCTF之隐写-Find
WhaleCTF之隐写-Find 前往题目 图片保存到本地,用Stegsolve打开图片 找到二维码 用微信或qq扫描,得到flag~
- Chapter 3 树与二叉树
Chapter 3 树与二叉树 1- 二叉树 主要性质: 1 叶子结点数 = 度为2的结点数 + 1 2 二叉树第i层上最多有 (i≥1)个结点 3 深度为k的二叉树最多有 个结点 ...
- VC文件操作
VC文件操作 重命名文件: 注意: 该操作对文件夹一样有效! CFileFind Finder; CString sOldPath = _T("D:\\tt.txt"); CStr ...
- NoSQL 文档数据库
- Java校验时间段重叠
1.需求 要求保存每一条数据的startTime.endTime的中间时间段是唯一的,跟其他数据时间段不能存在冲突 比如: (2019-03-01 -> 2019-03-03 ) (2019- ...
- c语言学习笔记 - 枚举类型
今天学习了c语言的枚举类型的使用,可能是PHP里没使用过,开始看的时候还是觉得有点怪,后来做了下例子才理解,这里做个笔记记录一下. #include <stdio.h> enum anim ...
- 实习面试总结(只写了昨天腾讯的面试和拿到offer的一个小公司, 有空再把前面的补上吧)
一个月来面了大大小小的公司有近10个,还是总结一下吧,希望对大家有点用处. 我想说的是,大学四年,如果不会继续读研深造,那么你需要做的不仅仅是疯狂的做项目,或者单独的学算法. 最好的方式就是都了解一点 ...