Vue-axios封装(element)

第一步:在src目录下创建http.js

import axios from 'axios';
import { Message, Loading } from 'element-ui';
import router from './router';

// 请求超时时间 & 允许你cookie跨域 & 多环境打包配置
axios.defaults.timeout = 0;
// axios.defaults.withCredentials = true
axios.defaults.baseURL = process.env.VUE_APP_BASEURL;

//初始化loading
let loading;

//开始加载动画
function startLoading() {
  loading = Loading.service({
    lock: true,
    text: '拼命加载中...'
  });
}
// 结束加载动画
function endLoading() {
  loading.close();
}

// 请求拦截  设置统一header
axios.interceptors.request.use(
  config => {
    // 加载
    startLoading();
    if (localStorage.token) {
      config.headers['token'] = localStorage.token;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截  401 token过期处理
axios.interceptors.response.use(
  response => {
    endLoading();
    return response.data;
  },
  error => {
    // 错误提醒
    endLoading();
    Message.error(error.response);

    const { status } = error.response;
    if (status == 401) {
      Message.error('token已失效，请重新登录');
      // 清除token
      localStorage.removeItem('token');

      // 页面跳转
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

export default axios;

 

 

第二步:在main.js中全局挂载

import axio from './http.js'


//通过原型链全局挂载axios
Vue.prototype.$axios = axios

第三步:调用axios

mounted () {
    this.initDataList()
},
methods: {
    initDataList {    
        this.$axios.get()'http://www.baidu.com/api/homelist')
        .then((data) => {
            console.log(data)
        })
    }
}

 

大功告成,如果对你有帮助请别忘记关注或加博主QQ一对一提升

QQ:672365397