详解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 相关文章推荐
jquery高效反选具体实现
May 05 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
js给table赋值的实例代码
Oct 13 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
何时使用Map来代替普通的JS对象
Apr 29 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
什么是MVC,好东西啊
2007/05/03 PHP
php 中英文语言转换类代码
2011/08/11 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
西安交大自主招生自荐信
2014/01/27 职场文书
交通安全教育制度
2014/02/02 职场文书
励志演讲稿200字
2014/08/21 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
学习心得体会
2019/06/20 职场文书