详解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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
js每次Title显示不同的名言
Sep 25 Javascript
BOM与DOM的区别分析
Oct 26 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 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
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
Yii全局函数用法示例
2017/01/22 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
围观tangram js库
2010/12/28 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
Python 文件重命名工具代码
2009/07/26 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
药学专业学生的自我评价分享
2014/02/06 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
财务个人年度总结范文
2015/02/26 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电