vue封装axios以及elementu-i全局Loading

18 篇文章 0 订阅
import axios from 'axios';
import store from '../../../store';
//token我是存在vuex里面并且用持久化插件保存的 具体你可以根据自己项目更改
// import {
//   Toast
// } from 'vant' //引入vant组件
import { Loading, Message } from 'element-ui';
const options = { //loading参数
  lock: false,
  text: '拼命加载中...',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0)',
  customClass: 'load'
}
let loadingInstance = null;
// axios.defaults.baseURL = 'https://xxxxxxx.com/api/';// 正式服务器域名
axios.defaults.baseURL = 'http://192.168.1.111:3000/'; // 测试服务器域名
axios.interceptors.request.use(
  config => {
    config.headers['Content-Type'] = 'application/json;charset=UTF-8';
    //请求拦截添加全局加载并把sessionStorage的token添加到请求头里
    let token = store.state.token;
    if (token) {
      config.headers.common['Authorization'] = token;
    }
    return config
  },
  err => {
    return Promise.reject(err);
  }
)
axios.interceptors.response.use(data => {
  const code = data.data.code;
  if (code == 401) { //未登录
    Message({ message: data.data.message, type: 'error', showClose: true, duration: 1000 });
    window.location.href = '/'
  }
  //return 数据
  return data.data
}, error => {
  //接口报错失败后 提示错误 并关闭提示
  Message({ message: "网络不给力,请稍后重试哟~", type: 'error', showClose: true, duration: 1000 });
  return Promise.reject(error)
})
function request(url, method, data = {}, params = {}, boolean) {
  if (boolean) {
    loadingInstance = Loading.service(options);
  }
  return new Promise((resolve, reject) => {
    return axios({
      url: `${url}`,
      method,
      data,
      params
    }).then(async (res) => {
      if (loadingInstance) {
        loadingInstance.close();
      }
      if (res.code === 200) {
        resolve(res)
      } else if (res.code === 2000) {
        Message({ message: res.message, type: 'error', showClose: true, duration: 1000 });
      } else if (res.code === 1) {
        Message({ message: res.message, type: 'error', showClose: true, duration: 1000 });
      } else if (res.code === 2024) {
        window.location.href = '/'
      } else {
      }
    }).catch(err => {
      reject(err)
    })
  })
}

export function GET(url, datas, boolean = true) {
  return request(`${url}`, 'get', {}, { ...datas }, boolean)
}

export function POST(url, data, boolean = true) {
  return request(`${url}`, 'post', data, {}, boolean)
}

export function PUT(url, data, boolean = true) {
  return request(`${url}`, 'put', data, {}, boolean)
}

export function DELETE(url, data, boolean = true) {
  return request(`${url}`, 'delete', data, {}, boolean)
}

完成axios配置以后

//然后需要什么方式的请求
import {GET} from './axios'
export function menu(params) {
  return GET('/api/menu',params)
}

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值