vue-cli axios封装(element-ui)

Posted tmsdxcz

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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封装(element-ui)

vue-cli4 项目框架的搭建 以及 路由的封装axios的封装公共函数js文件的封装引用vuex的基本用法minins混入css以及字体图标和图片的引入等

vue-cli 初始化创建 vue2.9.6 项目路由守卫封装axiosvuex

基于vue-cli的快速开发框架

「Vue实战」武装你的前端项目

vue-cli 引入 axios 并全局配置axios