vue中axios的封装问题(简易版拦截,get,post)

前端之家收集整理的这篇文章主要介绍了vue中axios的封装问题(简易版拦截,get,post)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

第一步还是先下载axios

第二步/src/utils/目录下建立一个htttp.js

{ // const token = getCookie('名称'); config.data = JSON.stringify(config.data); config.headers = { 'Content-Type':'application/x-www-form-urlencoded' } // if(token){ // config.params = {'token':token} // } return config; },error => { return Promise.reject(err); } ); //http response 拦截器 axios.interceptors.response.use( response => { if(response.data.errCode ==2){ router.push({ path:"/login",querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转 }) } return response; },error => { return Promise.reject(error) } ) /** * 封装get方法 * @param url * @param data * @returns {Promise} */ export function fetch(url,params={}){ return new Promise((resolve,reject) => { axios.get(url,{ params:params }) .then(response => { resolve(response.data); }) .catch(err => { reject(err) }) }) } /** * 封装post请求 * @param url * @param data * @returns {Promise} */ export function post(url,data = {}){ return new Promise((resolve,reject) => { axios.post(url,data) .then(response => { resolve(response.data); },err => { reject(err) }) }) }

第三步

在main.js中引入

全局变量 Vue.prototype.$post=post; Vue.prototype.$get=get;

最后在组件里直接使用

{ console.log(response) }) },

其余的方法一样

总结

以上所述是小编给大家介绍的vue中axios的封装问题(简易版拦截,get,post)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章