详解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 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
详解TypeScript的基础类型
Feb 18 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实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
功能强大的php文件上传类
2016/08/29 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
Python SQLite3简介
2018/02/22 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
Python class的继承方法代码实例
2020/02/14 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
高中美术教学反思
2014/01/19 职场文书
小学体育教学反思
2014/01/31 职场文书
财经学院自荐信范文
2014/02/02 职场文书
银行服务感言
2014/03/01 职场文书
学生安全责任书
2014/04/15 职场文书
婚庆答谢词
2015/01/04 职场文书
幼师大班个人总结
2015/02/13 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP