vue-cli axios封装(element-ui)
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)的更多相关文章
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy
1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...
- vue中的swiper element ui
欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...
- 【Vue】axios封装,更好的管理api接口和使用
在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...
- 上传图片组件封装 element ui
// element ui 文档地址: http://element.eleme.io/#/zh-CN <template> <div> <div class=" ...
- vue中,使用element ui的弹窗与echarts之间的问题
今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到: 这就 ...
- vue问题三:element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
- vue项目-axios封装、easy-mock使用
vue全家桶概括下来就是 项目构建工具(vue-cli) 路由(vue-router) 状态管理(vuex) http请求工具 vue有自己的http请求工具插件vue-resource,但是vue2 ...
- Vue-axios 在vue cli中封装
common/post.js import axios from 'axios' // 引入axios import qs from 'qs' // 引入qs axios.defaults.baseU ...
- Laravel 6.X + Vue.js 2.X + Element UI +vue-router 配置
Laravel 版本:6.X Vue 版本:2.X Laravel配置: Laravel使用的是Laragon安装 选择Laravel:接下来弹出框,输入项目名,laravel会自动创建一个数据库,数 ...
随机推荐
- 【.NET 与树莓派】控制彩色灯带(WS28XX)
彩色灯带,相信不用老周多说,大家都知道,没准你家里的灯墙里面就有.老周的茅屋是早期建造的,所以没有预留的灯槽,明灯的话是不好看的,因此老周家里没使用灯带.不过,像柜子后面,显示器后面,书桌边沿这些地方 ...
- pyecharts简介
一.概况 Echarts 是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可. 而 Python 是一门富有表达力的语言,很适合用于数据处理.当数据分析遇上数据可 ...
- Excel字符串函数公式大全
一.Excel字符串的操作 1.1.Excel根据字节截取对应字符串(注:一个中文汉字对应两个字节) =LEFTB(A3,7) 从左边开始截取7个字节 =RIGHTB(A10,10) 从右边开始截取 ...
- 资源分配情况(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 资源的分配情况,无非就是未分配.已分配和过度分配三种,这些都可以通过各种视图查看,比如[资源]>[工作组规划器]视图 ...
- Shell之awk常用用法
- java -jar 配置参数写法说明
java -Dxxx=test -jar xxx.jar (放在-jar之前) 取值:System.getProperty("xxx") spring的@value(" ...
- SpringBoot 整合MinIO
引入依赖 <dependency> <groupId>io.minio</groupId> <artifactId>minio</artifact ...
- Java整合redis报错s if RDB snapshotting fails (stop-writes-on-bgsave-error option)
Caused by: io.lettuce.core.RedisCommandExecutionException: MISCONF Redis is configured to save RDB s ...
- 【LeetCode】163. Missing Ranges 解题报告 (C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 遍历 日期 题目地址:https://leetcode ...
- 【Android开发】微信精选,文章资讯类App开发记录总结
缘起 微信精选的App开发来源是在聚合数据上看到了有免费的微信精选的数据接口,无限调用.相对于其他的诸如违章查询,医药查询,NBA赛事等等,我感觉还是微信文章精选这个数据接口离我最近,所以想着拿着个数 ...