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后台系统登录态管理

    这篇文章主要介绍了vue后台系统登录管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue计算属性的学习笔记

    Vue计算属性的学习笔记

    这篇文章主要为大家详细介绍了Vue计算属性的学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 网站国际化多语言处理工具i18n安装使用方法图文详解

    网站国际化多语言处理工具i18n安装使用方法图文详解

    国际化是设计软件应用的过程中应用被使用与不同语言和地区,下面这篇文章主要给大家介绍了关于网站国际化多语言处理工具i18n安装使用方法的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Console高级用法总结

    Console高级用法总结

    Console 对象提供了浏览器控制台调试的接口。在不同宿主环境上它的工作方式可能不一样,但通常都会提供一套共性的功能,本文主要总结了Console的一些高级用法,感兴趣的小伙伴可以参考一下
    2023-04-04
  • vue开发runtime core中的虚拟节点示例详解

    vue开发runtime core中的虚拟节点示例详解

    这篇文章主要为大家介绍了vue开发runtime core中的虚拟节点示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Vue使用三方工具vueUse实现虚拟列表

    Vue使用三方工具vueUse实现虚拟列表

    其实采用vueUse中的useVirtualList方法同样可以实现虚拟列表,这篇文章小编就来和大家详细介绍一下如何使用vueUse实现简单的虚拟列表效果吧
    2024-04-04
  • VUE+elementui面包屑实现动态路由详解

    VUE+elementui面包屑实现动态路由详解

    今天小编就为大家分享一篇VUE+elementui面包屑实现动态路由详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue组件中传值EventBus的使用及注意事项说明

    vue组件中传值EventBus的使用及注意事项说明

    这篇文章主要介绍了vue组件中传值EventBus的使用及注意事项说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue 组件之间的通信方式详解

    Vue 组件之间的通信方式详解

    在 Vue.js 中,组件是构建应用程序的基本单位,然而,当你的应用程序变得复杂时,组件之间的通信变得至关重要,本文将介绍几种 Vue 组件之间通信的方式,帮助你更好地管理和组织代码,感兴趣的朋友一起看看吧
    2024-06-06
  • 如何去掉ElementUI Table的hover变色问题

    如何去掉ElementUI Table的hover变色问题

    这篇文章主要介绍了如何去掉ElementUI Table的hover变色问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论