vue axios封装 包括loading等解决方法

// 导入axios

import axios from 'axios'

// post请求数据需要

import qs from 'qs'

// 引入loading

import { Loading } from 'element-ui';

var loading = null;

// 进度条

// 配置

axios.defaults.baseURL = '/api';

// 请求之前拦截

axios.interceptors.request.use(function (config) {

    let token = localStorage.getItem('token') 

    // let token = 'adf7cbdcdc62b07d94f86339e5687ca51'

    config.headers['token'] = token 

    // 在发送请求之前做些什么

    // 拦截所有请求  发送之前就加一些东西

    config.headers['Content-Type'] = 'application/x-www-form-urlencoded'

    // 请求之前发送loading

   loading = Loading.service({

        lock: true,

        text: 'Loading',

        spinner: 'el-icon-loading',

        background: 'rgba(0, 0, 0, 0.7)'

      });

    return config;

}, function (error) {

    // 对请求错误做些什么

    return Promise.reject(error);

});

// 添加响应拦截器

axios.interceptors.response.use(function (response) {

    // 关闭

        loading.close();


    if (response.data.meta.msg == 'TOKEN有误')

    {

        Message({

            showClose: true,

            message: "糟糕TOKEN已过期请重新登录",

            type: "error"

        });

        return router.push({path:'/login'})

    }

    // 对响应数据做点什么

    return response;

  }, function (error) {

    // 对响应错误做点什么

    return Promise.reject(error);

  });

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。