1.http.js

/**
*
* http配置
*/

import axios from 'axios'
import { Loading, Message } from 'element-ui'

// axios 配置
axios.defaults.timeout = 5000;

// http request 拦截器
axios.interceptors.request.use(
config => {
// if (store.state.token) {
// config.headers.Authorization = `token ${store.state.token}`;
// }
return config;
},
err => {
return Promise.reject(err);
});

// http response 拦截器
axios.interceptors.response.use(
response=> {
 
return response;
},
err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
Message.error('请求错误')
break

case 401:
Message.error('未授权,请登录')
break

case 403:
Message.error('拒绝访问')
break

case 404:
Message.error(`请求地址出错: ${err.response.config.url}`)
break

case 408:
Message.error('请求超时')
break

case 500:
Message.error('服务器内部错误')
break

case 501:
Message.error('服务未实现')
break

case 502:
Message.error('网关错误')
break

case 503:
Message.error('服务不可用')
break

case 504:
Message.error('网关超时')
break

case 505:
Message.error('HTTP版本不受支持')
break

default:
}
}

return Promise.reject(err)
});

export default axios;

2.main.js

import axios from './assets/js/http.js'

Vue.prototype.$http = axios

vue-cli axios封装(element-ui)的更多相关文章

  1. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  2. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

  3. vue中的swiper element ui

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...

  4. 【Vue】axios封装,更好的管理api接口和使用

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

  5. 上传图片组件封装 element ui

    // element ui 文档地址: http://element.eleme.io/#/zh-CN <template> <div> <div class=" ...

  6. vue中,使用element ui的弹窗与echarts之间的问题

    今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到: 这就 ...

  7. vue问题三:element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

  8. vue项目-axios封装、easy-mock使用

    vue全家桶概括下来就是 项目构建工具(vue-cli) 路由(vue-router) 状态管理(vuex) http请求工具 vue有自己的http请求工具插件vue-resource,但是vue2 ...

  9. Vue-axios 在vue cli中封装

    common/post.js import axios from 'axios' // 引入axios import qs from 'qs' // 引入qs axios.defaults.baseU ...

  10. Laravel 6.X + Vue.js 2.X + Element UI +vue-router 配置

    Laravel 版本:6.X Vue 版本:2.X Laravel配置: Laravel使用的是Laragon安装 选择Laravel:接下来弹出框,输入项目名,laravel会自动创建一个数据库,数 ...

随机推荐

  1. Reids安全加固

    目录 一.简介 二.加固方案 一.简介 Redis 因配置不当存在未授权访问漏洞,可以被攻击者恶意利用. 在特定条件下,如果Redis以root身份运行,黑客可以给root账号写入SSH公钥文件,直接 ...

  2. 配置文件管理维护到gitlab上

    一.简介 在日常维护服务器中,会修改配置文件或者相应脚本,在修改前要对文件进行按照日期备份,这样会很麻烦,频繁修改的时候也会懒得去备份多个. 维护脚本分为服务端和客户端,服务端监听端口,接收客户端的采 ...

  3. 【cs231n笔记】assignment1之KNN

    k-Nearest Neighbor (kNN) 练习 这篇博文是对cs231n课程assignment1的第一个问题KNN算法的完成,参考了一些网上的博客,不具有什么创造性,以个人学习笔记为目的发布 ...

  4. UVA10976 分数拆分 Fractions Again?! 题解

    Content 给定正整数 \(k\),找到所有的正整数 \(x \geqslant y\),使得 \(\frac{1}{k}=\frac{1}{x}+\frac{1}{y}\). 数据范围:\(0& ...

  5. LuoguP7071 [CSP-J2020] 优秀的拆分 题解

    Content 给定一个数 \(n\),求是否能够拆分成 \(2\) 的正整数次幂的和的形式,并给出具体方案. 数据范围:\(1\leqslant n\leqslant 10^7\). Solutio ...

  6. ReentrantLock可重入锁——源码详解

    开始这篇博客之前,博主默认大家都是看过AQS源码的~什么居然没看过猛戳下方 全网最详细的AbstractQueuedSynchronizer(AQS)源码剖析(一)AQS基础 全网最详细的Abstra ...

  7. Docker 与 K8S学习笔记(十)—— 容器的端口映射

    我们一般将应用部署在容器里面,而一个服务器上会有许许多多的容器,那么外界该如何访问我们的应用呢?答案是:端口映射. Docker可以将容器对外提供服务的端口映射到host的某个端口上,外网通过此端口访 ...

  8. BAIRE ONE FUNCTIONS (Baire第一类函数)

    目录 定义 导函数 一致收敛性质 的连续点 JOHNNY HU, BAIRE ONE FUNCTIONS. 一些基本的定义(诸如逐点收敛, 一致收敛\(F_{\sigma}\)集合等)就不叙述了. 定 ...

  9. [技术干货-算子使用] Mindspore 控制流中存在原地更新操作类副作用算子时循环值不更新问题记录

    关于mindspore 原地更新类算子的一点思考记录如下: 现象记录: 原始测试代码 错误结果复现: 分析: 如果在场景中加入42行的copy()操作此时cpu的结果就会正确,但是gpu的结果则不受c ...

  10. CS5268替代AG9321MCQ 替代AG9321方案 TYPEC转HDMI多功能拓展坞

    台湾安格AG9321MCQ是一款TYPEC拓展坞产品方案,他集中了TYPEC 转HDMI  VGA  PD3.0快充  QC3.0数据传输 I2S接口的音频DAC输出以及可以各种读卡器功能. Caps ...