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会自动创建一个数据库,数 ...
随机推荐
- 用 WinUI 3 开发了一个摸鱼应用
1. 开发了一个摸鱼 App 我做了一个简单的 App:摸鱼. 如上图所示,这个 App 就只有一个按钮,点击后假装开始 Windows Update,然后用户就可以光明正大地摸鱼了. 不要小看摸鱼, ...
- secret_file
拿到题目例行检查,进入main函数 这个逆向有些复杂,程序首先让我们像dest输入256个字符,我们可以看到关键的strcmp(v15,v17),若相等则执行poppen poppen这个函数有额外的 ...
- jarvisoj_fm(格式字符串)
我又回来了,前几天被timeout问题折磨,还是放弃了 拿到题目还是file一下 看到时32位的程序,于是把程序放入ida*32中 可以看到当x等于4的时候可以拿到shell,上面的printf(bu ...
- 筛选(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 [视图]选项卡下有个[筛选器],筛选功能就在里面实现. 比如按[里程碑]筛选. 按[日期范围],再指定个起始日期和结束日期 ...
- 『学了就忘』Linux系统管理 — 86、查看系统资源相关命令
目录 1.vmstat命令 2.dmesg命令 3.free命令 4.查看CPU信息 5.查看本机登陆用户信息 (1)w命令 (2)who命令 6.uptime命令 7.查看系统与内核相关信息 1.v ...
- Django把现在时间写入数据库,模板渲染在页面中
1. 导入time模块 import time 2. 获取现在时间,使用"年-月-日 时:分:秒"这样的模板,赋值给变量 在views.py中: pt = time.strftim ...
- 【进阶】uniapp复现微信相册功能之【图视频编辑 + 压缩】
基于uniapp + vue实现微信相册,在实现了微信相册的基础上增加以下功能 1: 图片编辑 2: 视频编辑 3: 文件压缩 技术实现 开发环境:HbuilderX + nodejs 技术框架:un ...
- 【LeetCode】914. X of a Kind in a Deck of Cards 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 遍历 最大公约数 日期 题目地址: https:// ...
- Docker&K8S学习笔记(一)—— Docker安装
最近一年在工作上经常使用Docker与K8S,除了利用其打镜像,部署服务外,还基于Docker与K8S开发了一套CICD流水线平台,为了加深相关知识点的理解,所以从今天开始会定期更新学习笔记,本套学习 ...
- ZOJ 3778:Talented Chef(贪心?思维)
Talented Chef Time Limit: 2 Seconds Memory Limit: 65536 KB As we all know, Coach Gao is a talented c ...