对于需要大量使用 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 cancelconst 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 请求方法即可

基于 axios 的 Vue 项目 http 请求优化相关推荐

Vue项目的性能优化
目录前言一.代码层面的优化 1. **v-if 和 v-show 区分使用场景** 2. **computed 和 watch 区分使用场景** 3. **v-for 遍历必须为 item 添加 ...
3分钟让你学会axios在vue项目中的基本用法（建议收藏）
Axios酸狗来教你提示:本篇详解axios在vue项目中的实例.在使用Vue.js框架开发前端项目时,会经常发送ajax请求服务端接口,在开发过程中,需要对axios进一步封装,方便在项目中的使用 ...
前端Vue项目打包性能优化方案
文章目录一.前言二.优化方案 1丶路由懒加载(代码分割) 2丶第三方插件按需加载 3丶常用插件库使用CDN加速 4.gzip压缩 5.打包不生成map文件三.工具推荐可视化分析包大小总结一 ...
VUE 项目如何快速优化？| 原力计划
作者 | 靖凡无所畏惧责编 | 屠敏出品 | CSDN 博客前言相信现在很多人都是用Vue做过了各种项目,但是项目代码做完和上线并不代表这结束,还有上线以后的优化也是很重要的一点,这次的博客就 ...
如何创建基于webpack的vue项目和基于vite的vue项目及将现有vue项目变更为基于vite项目
基于新电脑实现步骤如下 1.如果这些都安装好了可以直接进入下一步,安装npm,分别敲入如下命令 /bin/zsh -c "$(curl -fsSL https://gitee.com/cun ...
教你搭建基于typescript的vue项目
自尤大去年9月推出vue对typescript的支持后,一直想开箱尝试,对于前端sr来说,vue的顺滑加上ts的面向对象,想着就非常美好~ 终于在两个月前,找到了个机会尝试了一把vue+ts的组合. ...
已完成的vue项目进行seo优化 (prerender-spa-plugin + vue-meta-info)
为啥要seo优化? 别人在百度搜索时,搜索你们公司的网站,会出现好多好多搜索结果,如果想要让你们公司的网站搜索排名靠前一点,让人一眼就能看见你们公司网站,这时候就需要seo优化了. 众所周知,vue是 ...
Vue项目从打包优化到上线部署云服务器的全过程（**教你在云服务器上优化部署自己的项目**）
前言作为前端开发人员,我们不仅要会写代码,优化打包,上线部署也是一个前端工程师必备的技能,这篇文章就教大家从零开始,把一个完整项目打包发布到线上服务器.首先的准备工作就是需要一台云服务器. 项目打包 ...
vue项目使用externals优化打包体积
查看打包体积下载查看打包体积的插件 npm install webpack-bundle-analyzer -save-dev 在vue.config.js中配置 chainWebpack: con ...

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

依赖

`axios` 初始化

`http` 请求二次封装

基于 axios 的 Vue 项目 http 请求优化相关推荐

最新文章

热门文章

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

依赖

axios 初始化

http 请求二次封装

基于 axios 的 Vue 项目 http 请求优化相关推荐

最新文章

热门文章

`axios` 初始化

`http` 请求二次封装