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} }); }
Vue axios 请求拦截封装
最新推荐文章于 2021-08-23 11:52:23 发布