vue中axios的封装问题(简易版拦截,get,post)
程序员文章站
2022-08-28 23:05:43
第一步还是先下载axios
npm install axios --save
第二步/src/utils/目录下建立一个htttp.js
impo...
第一步还是先下载axios
npm install axios --save
第二步/src/utils/目录下建立一个htttp.js
import axios from 'axios'; axios.defaults.timeout = 5000; axios.defaults.baseurl =''; //http request 拦截器 axios.interceptors.request.use( config => { // 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中引入
import {post,get} from './utils/http' //定义全局变量 vue.prototype.$post=post; vue.prototype.$get=get;
最后在组件里直接使用
mounted(){ this.$post('/api/v2/movie/top250') .then((response) => { console.log(response) }) },
其余的方法一样
总结
以上所述是小编给大家介绍的vue中axios的封装问题(简易版拦截,get,post),希望对大家有所帮助
上一篇: Redis事务
下一篇: 特严厉顾客正闹冷人幽默笑话
推荐阅读
-
vue 2.x 中axios 封装的get 和post方法
-
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
-
vue中axios解决跨域问题和拦截器的使用方法
-
vue中axios的封装问题(简易版拦截,get,post)
-
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
-
vue中axios调用分装的请求方法(get/post方式)
-
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
-
vue之axios封装post请求后端接收不到参数的问题
-
vue 2.x axios 封装的get 和post方法
-
axios发送get post请求问题 与 axios拦截器的使用