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 相关文章推荐
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
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 什么是PEAR?
2009/03/19 PHP
php adodb操作mysql数据库
2009/03/19 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
window.location和document.location的区别分析
2008/12/23 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
javascript版2048小游戏
2015/03/18 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
浅谈scrapy 的基本命令介绍
2017/06/13 Python
pytorch 数据集图片显示方法
2018/07/26 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
VC++笔试题
2014/10/13 面试题
干部下基层实施方案
2014/03/14 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python