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 相关文章推荐
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 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中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
Node.js编码规范
2014/07/14 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
Python素数检测的方法
2015/05/11 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
Python中logging日志库实例详解
2020/02/19 Python
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
护士自我鉴定
2013/10/23 职场文书
推荐信怎么写
2014/05/09 职场文书
后备干部培训方案
2014/05/22 职场文书
信息工作经验交流材料
2014/05/28 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
民主生活会汇报材料
2014/12/15 职场文书
追悼会答谢词
2015/01/05 职场文书
离婚起诉书范本
2015/05/18 职场文书
小孩不笨观后感
2015/06/03 职场文书
八年级历史教学反思
2016/02/19 职场文书