首页 > 编程 > JavaScript > 正文

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

2019-11-19 13:38:50
字体:
来源:转载
供稿:网友

第一步还是先下载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),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表