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


Posted in Javascript onJune 15, 2018

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

Javascript 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 #Javascript
webpack公共组件引用路径简化小技巧
Jun 15 #Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 #Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 #Javascript
详解vue组件开发脚手架
Jun 15 #Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 #Javascript
vue cli 3.0 使用全过程解析
Jun 14 #Javascript
You might like
PHP has encountered an Access Violation
2007/01/15 PHP
php 设计模式之 工厂模式
2008/12/19 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
PHP类的封装与继承详解
2015/09/29 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
Javascript模板技术
2007/04/27 Javascript
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
js 数组操作代码集锦
2009/04/28 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
redux-saga 初识和使用
2018/03/10 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
中学教师实习自我鉴定
2013/09/28 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
vue实现登陆页面开发实践
2022/05/30 Vue.js