详解基于 axios 的 Vue 项目 http 请求优化


Posted in Javascript onSeptember 04, 2017

对于需要大量使用 http 请求的项目,我们通常会选择对 http 请求的方法进行二次封装,以便增加统一的拦截器,或者统一处理阻止重复提交之类的逻辑。Vue.js 的项目中我们选择使用了 axios 这样一个 http 库,下面也就简述下基于 axios 做的简单二次封装

依赖

首先引入 axios ,对于 ie9 这样不支持 promise 的浏览器还需引入 es6-promise 模块

require('es6-promise').polyfill();
var axios = require('axios');

axios 初始化

初始化我们要实现两个需求:

1.发送请求时带上 cookies

2.重发发送请求时,如果前一次相同请求还未结束则中止前一次请求

const httpServer = axios.create({
  responseType: 'json',
  withCredentials: true, // 设置 withCredentials 使请求带上 `cookies`
  cancelToken: new axios.CancelToken(function (c) {
    cancel = c // 记录当前请求的取消方法
  })
})

http 请求二次封装

var promiseArr = {} // 用于记录每个请求的取消方法

const gUtils = {
  getData: function () {
    let cancel
    const httpServer = axios.create({
      responseType: 'json',
      withCredentials: true, // 设置 withCredentials 使请求带上 `cookies`
      cancelToken: new axios.CancelToken(function (c) {
        cancel = c // 记录当前请求的取消方法
      })
    })
    
    // 设置一个拦截器,每次发起请求前取消掉在进行中的相同请求
    httpServer.interceptors.request.use(function (config) {
     if (promiseArr[config.url]) {
      promiseArr[config.url]('操作取消')
      promiseArr[config.url] = cancel
     } else {
      promiseArr[config.url] = cancel
     }
  
     return config
    }, function (err) {
     // return Promise.reject (error)
    })
  
    return httpServer
  }
}

这样我们在对接服务时候直接使用我们封装好的 http 请求方法即可

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript面向对象之Javascript 继承
May 04 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 #Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 #Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 #Javascript
node-sass安装失败的原因与解决方法
Sep 04 #Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 #Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 #Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 #Javascript
You might like
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
JavaScript代码调试方法实例小结
2019/01/05 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python三方库之requests的快速上手
2019/03/04 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
经典洗发水广告词
2014/03/13 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
大学教师个人总结
2015/02/10 职场文书
前台岗位职责
2015/02/13 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
python爬虫框架feapde的使用简介
2021/04/20 Python
Python机器学习之底层实现KNN
2021/06/20 Python
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers