之前有发过Fetch请求封装,有朋友问跟axios有什么区别,顺便发一份axios请求封装.
主要代码
import qs from 'qs';import axios from 'axios';import { Message } from 'iview';import uitls from './util';let baseUrl = 'http://192.168.0.1:8888/'; //设置你的baseUrlconst CancelToken = axios.CancelToken;const source = CancelToken.source();//设置tokenfunction setToken() { if (utils.local.get('token')) { axios.defaults.headers.common['token'] = utils.getLocal('token'); } }//请求验证拦截器axios.interceptors.request.use(config => { store.commit('UPDATE_LOADING', true); //显示loading,这里没有用vuex可以省去 //判断请求不是登陆接口的时候,字段是不是过期了,(根据业务逻辑做对应的处理) if (config.url.indexOf('login') < 0) { let lessTime = Number(uitls.local.get('expireTime')) - Date.now(); //后台返回的过期时间与现在的进行计算 if (lessTime <= 0) { Message.error({ content: '登陆过期', duration: 5 }); source.token('token过期了'); store.commit('UPDATE_LOADING', false); //隐藏loading window.location.href = '/login'; utils.local.clear(); } } return config; });//返回数据拦截器axios.interceptors.response.use(res => { if (res.config.url.indexOf('login') >= 0) { const { token, expireTime, code, data } = res.data; if (code == '200') { //登陆后做出一些本地的处理,按需加载,() //................... utils.local.set('expireTime', expireTime); //过期时间 utils.local.set('token', token); } } return res; });//封装请求方法function formatReq(type, url, data) { setToken(); return new Promise((reslove, reject) => { axios({ method: type, url: `${baseUrl}${url}`, headers: { //这里的请求头与后台商量设置 'content-Type': 'application/x-www-form-urlencoded' }, cancelToken: source.token, data: qs.stringify(data) //java后台用qs转 // data:JSON.stringify(data)//PHP后台用JSON转 }) .then(r => { store.commit('UPDATE_LOADING', false); //隐藏loading //这里可以添加指定对应状态码的处理方式,比如登陆过期,res.data.code === '6666' 路由跳转到login reslove(r); }) .catch(e => { store.commit('UPDATE_LOADING', false); //隐藏loading reject(e.message); Message.error(e.message); }); }); }const Http = { get: (url, query) => { url = utils.formatUrl(url, query); setToken(); return axios.get(`${baseUrl}${url}`, { cancelToken: source.token }).then(r => r); }, post: (url, data) => formatReq('post', url, data), put: (url, data) => formatReq('put', url, data), patch: (url, data) => formatReq('patch', url, data), delete: (url, data) => formatReq('delete', url, data) };export default Http;
util.js
//处理get请求,传入参数对象拼接let formatUrl = obj => { let params = Object.values(obj).reduce((a, b, i) => `${a}${Object.keys(obj)[i]}=${b}&`, '?'); return params.substring(0, params.length - 1); };//增删改查本地存储let local = { set(key, value) { if (checkLocalStorage()) { window.localStorage.setItem(key, value); } else { let Days = 30; let exp = new Date(); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); document.cookie = key + '=' + escape(value) + ';expires=' + exp.toGMTString(); } }, get(key) { if (checkLocalStorage()) { return window.localStorage.getItem(key) ? window.localStorage.getItem(key) : null; } else { return getCookie(key); } }, clear(key) { if (checkLocalStorage()) { window.localStorage.removeItem(key); } else { let exp = new Date(); exp.setTime(exp.getTime() - 1); let cval = getCookie(key); if (cval != null) document.cookie = key + '=' + cval + ';expires=' + exp.toGMTString(); } } };function checkLocalStorage() { //确认是否支持Localstorage return window.localStorage && (window.localStorage.setItem('a', 123), window.localStorage.getItem('a') == 123) ? true : false; }function getCookie(name) { let arr, reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); if ((arr = document.cookie.match(reg))) return unescape(arr[2]); else return null; }export default { formatUrl, local };
main.js 引入
import Http from './helper/api/axios.js'; Vue.prototype.Http = Http;
使用
async getData(){ let res = await this.Http.get('url', data); }
作者:会拐弯的蜗牛
链接:https://www.jianshu.com/p/07309e077b28