详解vue中axios的封装


Posted in Javascript onJuly 18, 2018

第一步还是先下载axios

cnpm install axios -S

第二步建立一个htttp.js

import axios from 'axios';
import { Message } from 'element-ui';

axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';


//http request 拦截器
axios.interceptors.request.use(
 config => {
  // const token = getCookie('名称');注意使用的时候需要引入cookie方法,推荐js-cookie
  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)
     })
  })
 }

 /**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url,data = {}){
 return new Promise((resolve,reject) => {
  axios.patch(url,data)
     .then(response => {
      resolve(response.data);
     },err => {
      reject(err)
     })
 })
}

 /**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url,data = {}){
 return new Promise((resolve,reject) => {
  axios.put(url,data)
     .then(response => {
      resolve(response.data);
     },err => {
      reject(err)
     })
 })
}

第三步

在main.js中引入

import axios from 'axios'
import {post,fetch,patch,put} from './utils/http'
//定义全局变量
Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;

最后在组件里直接使用

mounted(){
  this.$fetch('/api/v2/movie/top250')
   .then((response) => {
    console.log(response)
   })
 },

其余的方法一样
Javascript 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
vue router返回到指定的路由的场景分析
Nov 10 Javascript
Javascript中的解构赋值语法详解
Apr 02 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 #Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 #Javascript
使用Vue实现图片上传的三种方式
Jul 17 #Javascript
vue的token刷新处理的方法
Jul 17 #Javascript
vue 权限认证token的实现方法
Jul 17 #Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 #Javascript
详解webpack import()动态加载模块踩坑
Jul 17 #Javascript
You might like
提取HTML标签
2006/10/09 PHP
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
js的event详解。
2006/09/06 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
js实现文字滚动效果
2016/03/03 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
python django集成cas验证系统
2014/07/14 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Python通过select实现异步IO的方法
2015/06/04 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
新闻专业本科生的自我评价分享
2013/11/20 职场文书
说明书格式及范文
2014/05/07 职场文书
公关活动策划方案
2014/05/25 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
学生逃课检讨书
2015/02/17 职场文书
2015公司年度工作总结
2015/05/14 职场文书
光荣之路观后感
2015/06/12 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书