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使用时引入

例子

import fromdata from '@/utils/http'
 
fromdata('post','url',Data)
 

axios简单的二次封装的更多相关文章

  1. Vue:对axios进行简单的二次封装

    主要做3点: 1.配置一个请求地址前缀 2.请求拦截(在请求发出去之前拦截),给所有的请求都带上 token 3.拦截响应,遇到 token 不合法则报错 // 对 axios 的二次封装 impor ...

  2. vue项目中对axios的二次封装

    近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios' ...

  3. axios 二次封装

    一般项目往往要对 axios 库进行二次封装,添加一些自定义配置和拦截器等 案例 ./service/axios.js 1234567891011121314151617181920212223242 ...

  4. 原生 Ajax 封装 和 Axios 二次 封装

    AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...

  5. 简单二次封装的Golang图像处理库:图片裁剪

    简单二次封装的Golang图像处理库:图片裁剪 一.功能 Go语言下的官方图像处理库 简单封装后对jpg和png图像进行缩放/裁剪的库 二.使用说明 1.首先下载 go get -v -u githu ...

  6. vue中axios的二次封装

    我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建 ...

  7. 【vue】axios二次封装,更好的管理api接口和使用

    在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...

  8. 使用Vue CLI 3将基于element-ui二次封装的组件发布到npm

    前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...

  9. 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

    前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...

随机推荐

  1. LUOGU P1337 [JSOI2004]平衡点 / 吊打XXX(模拟退火)

    传送门 解题思路 学习了一下玄学算法--模拟退火,首先要求平衡处,也就是求势能最小的地方,就是求这个点到所有点的距离*重量最小.剩下的几乎是模拟退火的板子了. #include<iostream ...

  2. Quartz:目录

    ylbtech-Quartz:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtec ...

  3. PAT甲级——A1091 Acute Stroke【30】

    One important factor to identify acute stroke (急性脑卒中) is the volume of the stroke core. Given the re ...

  4. WhaleCTF之隐写-Find

    WhaleCTF之隐写-Find 前往题目 图片保存到本地,用Stegsolve打开图片 找到二维码 用微信或qq扫描,得到flag~

  5. Chapter 3 树与二叉树

    Chapter 3 树与二叉树 1-   二叉树 主要性质: 1   叶子结点数 = 度为2的结点数 + 1   2   二叉树第i层上最多有 (i≥1)个结点 3   深度为k的二叉树最多有 个结点 ...

  6. VC文件操作

    VC文件操作 重命名文件: 注意: 该操作对文件夹一样有效! CFileFind Finder; CString sOldPath = _T("D:\\tt.txt"); CStr ...

  7. NoSQL 文档数据库

  8. Java校验时间段重叠

    1.需求 要求保存每一条数据的startTime.endTime的中间时间段是唯一的,跟其他数据时间段不能存在冲突 比如: (2019-03-01 -> 2019-03-03 )  (2019- ...

  9. c语言学习笔记 - 枚举类型

    今天学习了c语言的枚举类型的使用,可能是PHP里没使用过,开始看的时候还是觉得有点怪,后来做了下例子才理解,这里做个笔记记录一下. #include <stdio.h> enum anim ...

  10. 实习面试总结(只写了昨天腾讯的面试和拿到offer的一个小公司, 有空再把前面的补上吧)

    一个月来面了大大小小的公司有近10个,还是总结一下吧,希望对大家有点用处. 我想说的是,大学四年,如果不会继续读研深造,那么你需要做的不仅仅是疯狂的做项目,或者单独的学算法. 最好的方式就是都了解一点 ...