当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue中axios的封装问题(简易版拦截,get,post)

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

2018年08月08日  | 移动技术网IT编程  | 我要评论

生命之岛2,党员与群众谈心记录,莲都二手房出售

第一步还是先下载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)，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网