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

 更新时间:2018年06月15日 09:24:31   作者:陈88  
这篇文章主要介绍了vue中axios的封装问题(简易版拦截,get,post),需要的朋友可以参考下

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

相关文章

  • vue前端路由以及vue-router两种模式实例详解

    vue前端路由以及vue-router两种模式实例详解

    路由这个概念最先是后端出现的,下面这篇文章主要给大家介绍了关于vue前端路由以及vue-router两种模式的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • vue3+vite+ts之axios的坑及解决

    vue3+vite+ts之axios的坑及解决

    这篇文章主要介绍了vue3+vite+ts之axios的坑及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • vue实现吸顶、锚点和滚动高亮按钮效果

    vue实现吸顶、锚点和滚动高亮按钮效果

    这篇文章主要介绍了vue实现一个简单的吸顶、锚点和滚动高亮按钮效果,需要的朋友可以参考下
    2019-10-10
  • 关于vue-property-decorator的基础使用实践

    关于vue-property-decorator的基础使用实践

    这篇文章主要介绍了关于vue-property-decorator的基础使用实践,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue中computed及watch区别实例解析

    Vue中computed及watch区别实例解析

    这篇文章主要介绍了Vue中computed及watch区别实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • 一文详解怎么安装离线vue环境

    一文详解怎么安装离线vue环境

    这篇文章主要给大家介绍了关于怎么安装离线vue环境的相关资料,由于公司要求在内网开发项目,而内网不能连接外网,因此只能离线安装vue环境,需要的朋友可以参考下
    2023-12-12
  • Vue对象的单层劫持图文详细讲解

    Vue对象的单层劫持图文详细讲解

    这篇文章主要介绍了vue2.x对象单层劫持的原理实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 详解Vue3中ref和reactive函数的使用

    详解Vue3中ref和reactive函数的使用

    这篇文章主要为大家详细介绍了Vue3中ref和reactive函数的使用教程,文中的示例代码讲解详细,对我们学习Vue有一定的帮助,需要的可以参考一下
    2022-07-07
  • 安装@vue/cli 报错npm WARN deprecated request@2.88.2问题

    安装@vue/cli 报错npm WARN deprecated request

    这篇文章主要介绍了安装@vue/cli 报错npm WARN deprecated request@2.88.2问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 关于vue使用ant design vue,打包后a-date-picker控件无法选择日期的问题

    关于vue使用ant design vue,打包后a-date-picker控件无法选择日期的问题

    这篇文章主要介绍了关于vite .env.test环境使用ant design vue,打包后a-date-picker控件无法选择日期的问题,本文针对这个问题提供了解决方法,需要的朋友可以参考下
    2023-04-04

最新评论