Vue axios 请求拦截封装

axion封装是vue项目开启时的必要之作,对axios的封装可以提高项目的效率和开发进度,通过promise对象,对axios的请求进行拦截处理,对反回值也进行处理,可以在项目中达到事半功倍的作用,以下为我项目中的一个封装实例
import axios from 'axios'
import {Message} from 'element-ui'
import router from '../router'

// 获取token
const token = localStorage.token?localStorage.token:'';

//  请求拦截
axios.interceptors.request.use(config=> {
  return config;
}, err=> {
  Message.error({message: '请求超时!'});
  return Promise.resolve(err);
})
//  响应拦截
axios.interceptors.response.use(res=> {
  if (res.data.code == 200) {
    return res.data.result;
  } else if (res.data.code == 401) {
    // router.push('/login')
  } else if (res.data.code == 520) {
    Message.error({message: '您已被禁言'});
  } else if(res.data.code == 201) {
    Message.error({message: res.data.msg});
    return Promise.reject(res);
  }
  return res.data.result;
}, err=> {
  if (err.response.status == 504||err.response.status == 404) {
    Message.error({message: '服务器被吃了⊙﹏⊙∥'});
  } else if (err.response.status == 403) {
    Message.error({message: '权限不足,请联系管理员!'});
  } else {
    Message.error({message: '网络不好,稍后再试吧'});
  }
  return Promise.reject(err);
})
console.log(token)

let base = '';
export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'token':token
    }
  });
}
export const Request = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'application/json',
      'token':token
    }
  });
}
export const getRequest = (url,data='') => {
  return axios({
    method: 'get',
    params: data,
    url: `${base}${url}`,
    headers:{'token':token}
  });
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值