axios带有请求拦截器，避免在每个请求里面加loading重复操作，可以封装进去，在请求开始时加载loading层，请求结束关闭，loading层用vux的loading加载
axios.js
import axios from 'axios'
import Vue from 'vue'
// 超时时间
axios.defaults.timeout = 15000;
// axios.defaults.withCredentials=true;
// http请求拦截器
axios.interceptors.request.use(config => {
Vue.$vux.loading.show({
text: 'Loading'
})
return config
}, error => {
setTimeout(() => {
Vue.$vux.loading.hide();
Vue.$vux.toast.text('加载超时', 'middle')
},3000)
return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => {// 响应成功关闭loading
Vue.$vux.loading.hide()
return data
}, error => {
setTimeout(() => {
Vue.$vux.loading.hide()
Vue.$vux.toast.text('请求失败', 'middle')
},1000)
return Promise.reject(error)
})
export default axios;
封装get和post方法 axios.service.js
import axios from './axios';
class myAxios{
getUrl(url){
return `${__ce.baseURL}${url}`; // 打包时用这个 __ce.baseURL
// return `/api${url}`; // 防止跨域，开发环境用这个代理
};
//公共ajax;
postServer(opt) {
let data = {};
if (opt.data) {
data = opt.data;
}
axios.post(opt.url, data).then((response) => {
console.log(response);
if(!response.data.status){
return;
}
if (opt.onSuccess) {
opt.onSuccess(response);
}
}).catch(error => {
if (opt.onFailed) {
opt.onFailed(error);
}
});
}
// get 请求
getServer(opt) {
let data = {};
if (opt.data) {
data = opt.data;
}
axios.get(opt.url, {params: data}).then((response) => {
if (opt.onSuccess) {
opt.onSuccess(response);
}
}).catch(error => {
if (opt.onFailed) {
opt.onFailed(error);
}
});
}
setData(opt) {
let data = {};
if (opt.data) {
data = opt.data;
}
return data;
}
}
export default myAxios;
封装方法~
import myAxios from './axios.service'
const myAxiosMethods = new myAxios();
class RecordServer{
// 查询订单 -- post方法
sendMiceIndentSearchServer(opt){
const data = myAxiosMethods.setData(opt);
const url = myAxiosMethods.getUrl('/search');// 这里的/search是后端给的接口地址
myAxiosMethods.postServer({url, data, onSuccess: opt.onSuccess, onFailed: opt.onFailed});
}
export default RecordServer;
在页面中使用
const recordSever = new RecordServer()
methods:{
_sendSearchServer(){ // 在需要的地方调用这个方法
recordServer.sendSearchServer({
data: this.params, // params是这个接口需要传递给后台的参数
onSuccess: (res) => {
console.log(res)
},
onFailed: (err) => {
console.log(err)
}
})
}
}
axios(封装使用、拦截特定请求、判断所有请求加载完毕)
博客地址:/71 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用 vue2.0之后,就不再对 vue-resource 更新 ...
jqGrid subGrid配置 如何首次加载动态展开所有的子表格
有时候需求需要默认加载表格的时候把子表格的数据也显示出来,经过研究相关SubGrids API配置如下: 属性 类型 描述 默认值 subGrid boolean 设置为true启用子表格.如果启用子 ...
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...
Entity Framework加载相关实体——延迟加载Lazy Loading、贪婪加载Eager Loading、显示加载Explicit Loading
Entity Framework提供了三种加载相关实体的方法:Lazy Loading,Eager Loading和Explicit Loading.首先我们先来看一下MSDN对三种加载实体方法的定义 ...
vue-loader 调用了cssLoaders方法配置了css加载器属性。
module: { loaders: [ // 这里也是相应的配置,test就是匹配文件,loader是加载器, { test: /\.vue$/, loader: 'vue' }, { test: ...
三、js提交请求加载启动动画、请求完成成功回调、注销加载动画
1.通过Query post方式进行异步请求方法 jQuery.post(url, [data], [callback], [type]) 参数说明: url:发送请求地址 data:待发送 Key ...
Smart3D系列教程7之 《手动配置S3C索引加载全部的瓦片数据》
一.前言 迄今为止,Wish3D已经出品推出了6篇系列教程,从倾斜摄影的原理方法.采集照片的技巧.Smart3D各模块的功能应用.小物件的照片重建.大区域的地形重建到DSM及正射影像的处理生产,立足于 ...
vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
无法加载ISAPI 筛选器 当前配置只支持加载为 AMD64 处理器体系结构创建的映像
无法加载ISAPI 筛选器 当前配置只支持加载为 AMD64 处理器体系结构创建的映像 -11-9 0:18:49来源:本站原创作者:清晨320我要评论(0) 今天服务器的伪静态死活加载不上去 ...
随机推荐
mac 之 jmeter下载、解压、启动
1:下载地址:/download_jmeter.cgi 2:双击下载的zip文件,即可解压 3:打开终端,cd 到解压的目录下 例如:cd /User ...
.Net常见错误
常见错误 #1: 把引用当做值来用,或者反过来 C++ 和其他很多语言的程序员,习惯了给变量赋值的时候,要么赋单纯的值,要么是现有对象的引用.然而,在C# 中,是值还是引用,是由写这个对象的程序员决定 ...
mybaties # , $
mybaties会对#引入的值加上双引号, 如: #{buildingName} -------->"buildingName";mybaties会将$引入的值直接显示到sq ...
[Tex学习笔记]开方
$$\sqrt[n]{\frac{a}{b}}$$ $$\sqrt[\uproot{7}n]{\frac{a}{b}}$$
【AdaBoost算法】强分类器训练过程
一.强分类器训练过程 算法原理如下(参考自VIOLA P, JONES M. Robust real time object detection[A] . 8th IEEE International ...
Centos 如何安装Django环境
Centos 如何安装Django环境 | 浏览:954 | 更新:-10-31 20:34 针对Centos这一Linux发行版,进行django环境的搭建过程介绍. 工具/原料 Cen ...
Ubuntu 12.04 Desktop安装XAMPP
1/打开终端 在Dash里搜索.打开Dash,在里面搜索“gnome-terminal”,就可以找到终端应用序.快捷键Ctrl+Alt+L也可以,不过如果是虚拟机的话可能会有问题. 如果想以后快捷打开 ...
java基础随笔-内部类
今天来复习下内部类的一些基础知识. 首先是内部类的分类: 1.成员内部类 2.静态内部类 3.匿名内部类 4.局部内部类 下面逐一来介绍下. 首先是成员内部类,就是将内部类作为一个成员变量来处理.具体 ...
querySelectorAll 方法相比 getElementsBy 系列方法有什么区别
感谢 /question/24702250 简生 的回答 1. W3C 标准 querySelectorAll 属于 W3C 中的 Selectors API ...
关于android:screenOrientation=";portrait"; 横竖屏切换
当在AndroidManifest.xml文件中定义了android:screenOrientation="portrait",就表示当我们切换横竖屏的时候,屏幕的内容始终以竖屏显 ...
