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

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

第一步还是先下载axios

npm install axios --save

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

import axios from 'axios';

axios.defaults.timeout = 5000;

axios.defaults.baseURhttp://L ='';

//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'

//LOkAJbab定义全局变量

vue.prototype.$post=post;

Vue.prototype.$get=get;

最后在组件里直接使用

mounted(){

this.$post('/api/v2/movie/top250')

.then((response) => {

console.log(response)

})

},

其余的方法一样

总结

以上所述是给大家介绍的vue中axios的封装问题(简易版拦截,get,post)，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。