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会自动创建一个数据库,数 ...
随机推荐
- Mac 下安装Phonegap开发环境
Mac 下安装Phonegap开发环境 2014.09.11 星期四 评论 0 条 阅读 5,613 次 作者:野草 标签:phonegap ios mac 什么是Phonegap呢?Phon ...
- pwnable_start (内联汇编)
第一次写内联汇编的题目,以前见师傅们在exp中写汇编,感觉很厉害,今天碰到了,也记录一下. 下载附件发现是32位程序,什么保护都没开,ida看一下伪代码. 可以说是很简洁了,调用了一个write和re ...
- CF169A Chores 题解
Content 两兄弟要分担 \(n\) 件家务,第 \(i\) 件家务有一个复杂度 \(h_i\).兄弟俩以一个数 \(x\) 为界.所有满足复杂度 \(>x\) 的家务都给哥哥做,其余的给弟 ...
- CF1454A Special Permutation 题解
Content 给定一个整数 \(n\),请构造出一个长度为 \(n\) 的排列 \(\{a_i\}_{i=1}^n\),使得对于每个 \(a_i\),都有 \(a_i\neq i\). 我们称一个长 ...
- dump Java 程序和服务器相关信息
#!/bin/bash jps -lm read -p "enter java pid: " pid port=$(netstat -ntlp | grep $pid | awk ...
- Mysql 主从复制机制
https://blog.csdn.net/girlgolden/article/details/89226528 MySQL异步复制及semi-sync半同步复制,它们都基于MySQL binlog ...
- Spring学习(四)在Web项目中实例化IOC容器
1.前言 前面我们讲到Spring在普通JAVA项目中的一些使用.本文将介绍在普通的Web项目中如何实例化Spring IOC容器.按照一般的思路.如果在Web中实例化Ioc容器.这不得获取Conte ...
- VS2017激活key
密钥 KBJFW-NXHK6-W4WJM-CRMQB-G3CDH
- xcode 常用指令
使用LLDB进行调试时,如何打印一个数组:p *(int(*)[10])ptr或者是从ptr的第3个元素开始显示10个元素p *(int(*)[10])&ptr[3]
- 【LeetCode】294. Flip Game II 解题报告 (C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 记忆化搜索 日期 题目地址:https://leetc ...