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. mapbox获取各种经纬度

    点击地图即可获取经纬度,也可以手动输入经纬度来换算 在线查看运行效果 实现方法 mapbox中通过地图点击事件来获取到坐标,然后转换为其他的坐标系并输出在屏幕上即可 获取坐标 方法很简单,给地图添加一 ...

  2. 「Python实用秘技03」导出项目的极简环境依赖

    本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第3期 ...

  3. CF157A Game Outcome 题解

    Content 有一个 \(n\times n\) 的矩阵,每个元素都有一个权值.求所有满足其所在纵列所有元素权值和大于其所在横列所有元素权值和的元素个数. 数据范围:\(1\leqslant n\l ...

  4. 淘宝自动抢购, Webdriver浏览器常用的元素定位

    https://www.cnblogs.com/diaosicai/p/5909660.html #!/usr/bin/env python ''' 作者:张铭达 功能:淘宝秒杀购物 版本:0.2 日 ...

  5. SQL:大表多表更新的两种方法

    #标记不参与计算的明细(跨平台的或is_end=2)#跨平台订单:暂不处理 说明:大表即order_list_wx,几十万,需要根据小表(order_list_zfb ,几万)来做更新,查出两个平台都 ...

  6. C/C++ byte 转 int 有符号数,转成Int 无符号数

    p.p1 { margin: 0; font: 12px "Helvetica Neue"; color: rgba(69, 69, 69, 1); min-height: 14p ...

  7. LeetCode118. Pascal's Triangle 杨辉三角

    题目 给定行数,生成对应的杨辉三角 思考 同一行是对称的,最大的下标为(行数+1)/2;1,1,2,3,6;下标从0开始,则对应分别为0.0.1.1.2.2 对于第偶数行,个数也是偶数,对于奇数行,个 ...

  8. World is Exploding(hdu5792)

    World is Exploding Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  9. 第47篇-解释执行的Java方法调用native方法小实例

    举个小实例,如下: public class TestJNI { static { // 程序在加载时,自动加载libdiaoyong.so库 System.loadLibrary("dia ...

  10. Chapter 21 G-Methods for Time-Varying Treatments

    目录 21.1 The g-formula for time-varying treatments 21.2 IP weighting for time-varying treatments 21.3 ...