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. 算法 A-Star(A星)寻路

    一.简介 在游戏中,有一个很常见地需求,就是要让一个角色从A点走向B点,我们期望是让角色走最少的路.嗯,大家可能会说,直线就是最短的.没错,但大多数时候,A到B中间都会出现一些角色无法穿越的东西,比如 ...

  2. (转)synchronize线程同步例子

    在CSDN开了博客后,一直也没在上面发布过文章,直到前一段时间与一位前辈的对话,才发现技术博客的重要,立志要把CSDN的博客建好.但一直没有找到好的开篇的主题,今天再看JAVA线程互斥.同步的时候又有 ...

  3. 利用模块加载回调函数修改PE导入表实现注入

    最近整理PE文件相关代码的时候,想到如果能在PE刚刚读进内存的时候再去修改内存PE镜像,那不是比直接对PE文件进行操作隐秘多了么? PE文件在运行时会根据导入表来进行dll库的"动态链接&q ...

  4. 解决android studio no debuggable process

    这个问题可能是由多种因素造成的. 一.可能是buildtypes配置或选择错误,在对应module的build.gradle中确认如下配置 debug { debuggable true//一定要配置 ...

  5. springboot整合阿里云视频点播接口

    官方SDK文档地址: https://help.aliyun.com/document_detail/57756.html?spm=a2c4g.11186623.6.904.4e0d3bd9VbkIC ...

  6. JAVA判断是否是移动端设备(手机和平板)访问

    import java.util.regex.Matcher; import java.util.regex.Pattern; /** * 判断是否为移动端设备访问 * */ public class ...

  7. nim_duilib(11)之menu(1)

    introduction 更多控件用法,请参考 here 和 源码. 本文的代码基于这里 本文将介绍menu控件 xml文件添加代码 基于上一篇, 继续向basic.xml中添加下面的代码. xml完 ...

  8. 【LeetCode】541. Reverse String II 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 Java解法 Python解法 日期 题目地址:ht ...

  9. 【LeetCode】17. Letter Combinations of a Phone Number 电话号码的字母组合

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人公众号:负雪明烛 本文关键词:电话号码, 字母组合,回溯法,题解,leetcode, ...

  10. Counting Offspring(hdu3887)

    Counting Offspring Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...