基于vue配置axios
转载地址:https://juejin.im/post/5a02a898f265da43052e0c85
1、背景
- 在项目开发中ajax请求是必不可缺少
- 一部分ajax请求不需要loading或则请求时间少于多少是不显示loading
- 项目中对请求的同一化处理(错误处理,返回数据格式化处理,loading处理,token处理)
- 配置基于个人vue项目进行配置,已加载vux相关组件,会进行一些依赖的import(可以按需配置)
import Vue from 'vue'
import axios from 'axios'
//项目的一些环境配置参数,读取host
import config from '@/config'
//vuex状态管理,这里主要进行对全局loading的控制
import store from '@/store'
//vue-router对相应状态码的页面操作(router实例)
import router from '@/router'
//console对应封装
import { log } from '@/utils'
2、解决方案
对于axios的封装中我们定义几个参数进行申明
// 加载最小时间
const MINI_TIME =
// 超时时间(超时时间)
let TIME_OUT_MAX =
// 环境value
let _env = process.env.NODE_ENV
// 请求接口host
let _apiHost = config.api
// 请求组(判断当前请求数)
let _requests = []
一般一个项目中的根host和Content-Type都是统一的,这里对axios进行统一的配置(如果这个后端需要formData格式的表单即content-type='application/x-www-form-urlencoded;charset=utf-8'数据,需要对请求数据进行表单序列化,比较快的方式就是引入qs库qs.stringify进行处理后传输)
axios.defaults.headers.common['Content-Type'] = 'application/json'
axios.defaults.baseURL = _apiHost
一般情况下项目中同一时刻都会有不止一个请求在进行(还没有返回),要判断当前是否还存在进行中的ajax,就需要对_requests这个数组进行维护;
/**
* 添加请求,显示loading
* @param {请求配置} config
*/
function pushRequest(config) {
log(`${config.url}--begin`)
_requests.push(config)
Vue.$vux.loading.show({
text: 'Loading'
})
store.dispatch('loading')
} /**
* 移除请求,无请求时关闭loading
* @param {请求配置} config
*/
function popRequest(config) {
log(`${config.url}--end`)
let _index = _requests.findIndex(r => {
return r === config
})
if (_index > -) {
_requests.splice(_index, )
}
if (!_requests.length) {
Vue.$vux.loading.hide()
store.dispatch('loading', false)
}
}
接下来对axios基于上面的准备进行处理 /**
* 请求地址,请求数据,是否静默,请求方法
*/
export default (url, data = {}, isSilence = false, method = 'POST') => {
let _opts = { method, url }
//通用数据的合并(token)
let _data = Object.assign({}, data, { token: store.getters.token })
const _query = {}
for (let _key in _data) {
if (_data.hasOwnProperty(_key) && _data[_key] !== '') {
_query[_key] = _data[_key]
}
}
//axios实例请求定时器ID
let _timer = null
//判断请求类型
if (method.toLocaleUpperCase() === 'POST') {
_opts.data = _query
} else {
_opts.params = _query
}
//返回一个promise
return new Promise((resolve, reject) => {
//实例化axios
const _instance = axios.create({
timeout: TIME_OUT_MAX
})
//定义请求的唯一标识
let _random = { stamp: Date.now(), url: `${_apiHost + url}` }
//判断是否静默(静默的话就不加入请求标识队列,不是则申明此请求实例的定时器)
if (!isSilence) {
_timer = setTimeout(() => {
pushRequest(_random)
}, MINI_TIME)
}
//axios实例发送当前请求
//请求完成:1、取消当前请求的定时器;2、在当前请求标识队列中移除当前标识;
、成功的话返回统一处理后的数据,失败则对状态码进行判断
_instance(_opts)
.then(res => {
let responseData = res.data
clearTimeout(_timer)
popRequest(_random)
resolve(res.data)
})
.catch(res => {
let _response = res.response
let _message = null
clearTimeout(_timer)
popRequest(_random)
switch (_response.status) {
case :
_message = '404,错误请求'
break
case :
router.push({ path: '/login', query: { redirect: router.currentRoute.fullPath } })
_message = '未授权'
break
case :
_message = '禁止访问'
break
case :
_message = '请求超时'
break
case :
_message = '服务器内部错误'
break
case :
_message = '功能未实现'
break
case :
_message = '服务不可用'
break
case :
_message = '网关错误'
break
default:
_message = '未知错误'
}
if (!isSilence) {
Vue.$vux.toast.show({
text: _response.data && _response.data.error ? _response.data.error : _message,
type: 'warn',
width: '10em'
})
}
reject(res)
})
})
}
作者:NoManReady
链接:https://juejin.im/post/5a02a898f265da43052e0c85
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
基于vue配置axios的更多相关文章
- 项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置
vue项目创建 环境 1.傻瓜式安装node: 官网下载:https://nodejs.org/zh-cn/ 2.安装cnpm: >: npm install -g cnpm --regis ...
- Vue配置axios
1)安装插件(一定要在项目目录下): >: cnpm install axios 2)在main.js中配置: import axios from 'axios' Vue.prototype.$ ...
- 第三章、vue-项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置
目录 vue项目创建 环境 创建项目 重构项目目录 文件修订:目录中非配置文件的多余文件可以移除 全局配置:全局样式.配置文件 axios前后台交互 cookies操作 element-ui页面组件框 ...
- Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...
- vue 中axios 的基本配置和基本概念
axios的基本概念及安装配置方法 ajax:异步请求,是一种无需再重新加载整个网页的情况下,能够更新部分网页的技术 axios:用于浏览器和node.js的基于promise的HTTP客户端 a ...
- vue中axios配置代理的俩种方式及优缺点
概述:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 当我们使用vue向服务器发送AJAX请求时,我们会遇到跨域问题,一般跨域的解决方案有俩种,一种是官 ...
- 3.vue引入axios全局配置
前言: Vue官方推荐使用axios来进行异步访问. axios文档参考:axios中文文档 开始搭建: 1.引入axios (1)打开终端 win+R (2)切换到项目路径: g: cd Webap ...
- vue中配置axios.js文件,发送请求
为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...
- 【VUE】4.配置axios发起请求
1.配置axios 1. 前端请求后端接口进行数据交互的时候,需要配置axios 2. 导入axios包, main.js import axios from 'axios' 3. 挂载到原型配置上, ...
随机推荐
- 【Cf #291 B】R2D2 and Droid Army(二分,线段树)
因为题目中要求使连续死亡的机器人最多,令人联想到二分答案. 考虑如何检验这之中是否存在一段连续的长度为md的区间,其中花最多k步使得它们都死亡. 这个条件等价于区间中m个最大值的和不超过k. 枚举起点 ...
- 洛谷 P2751 [USACO4.2]工序安排Job Processing 解题报告
P2751 [USACO4.2]工序安排Job Processing 题目描述 一家工厂的流水线正在生产一种产品,这需要两种操作:操作A和操作B.每个操作只有一些机器能够完成. 上图显示了按照下述方式 ...
- Web Service(上)
1.XML CDATA指不应由XML解析器进行解析的文本数据. 在XML元素中,<和&是非法的.解析器会把字符<解释为新元素的开始,把字符&解释为字符实体的开始. 某些文本 ...
- Qt 编写多窗口程序
该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语 程序要实现的功能是:程序开始出现一个对话框,按下按钮后便能进入主窗口,如果直接关闭 ...
- Chapter 6(树)
1.树的储存方式 //****************双亲表示法************************ #define Max_TREE_SIZE 100 typedef int TElem ...
- Jenkins和Gitblit集成实现提交后自动构建
Gitblit是一个纯Java基于git的解决方案.它属于Apache Allura等伪造软件之一,它将票务系统与web ui结合在一起.我经历了一个设置过程,我想我可以帮助新用户避免痛点. 使用场景 ...
- linux查看当前文件夹的大小
1.(方法一)ls -lht会列出当前目录下每个文件的大小,同时也会给出当前目录下所有文件大小总和 [查看谬个文件的大小,] 2.(方法二)du -sh *也会列出当前文件夹下所有文件对应的大小 [把 ...
- Docker Secrets
一.简介 在微服务架构应用中,众多组件在集群中动态地创建.伸缩.更新.在如此动态和大规模的分布式系统上,管理和分发密码.证书等敏感信息将会是非常具有挑战性的工作.对于容器应用,传统的秘密分发方式,如将 ...
- jQuery速看
本文参考w3school网站. jQuery是一个十分流行的javascript库. 基础语法是:$(selector).action() $:表示使用的语法为jquery selector:选择器 ...
- 序列内第k小查询(线段树)
最近请教了一下大佬怎么求序列内第k大查询,自己又捣鼓了一下,虽然还没有懂得区间第k大查询,不过姑且做一个记录先吧 因为每个元素大小可能很大而元素之间不连续,所以我们先离散化处理一下,程序中的ori[ ...