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(封装使用、拦截特定请求、判断所有请求加载完毕)

博客地址:https://ainyi.com/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 处理器体系结构创建的映像 2011-11-9 0:18:49来源:本站原创作者:清晨320我要评论(0) 今天服务器的伪静态死活加载不上去 ...

随机推荐

mac 之 jmeter下载、解压、启动

1:下载地址:http://jmeter.apache.org/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 | 更新:2014-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 系列方法有什么区别

感谢 http://www.zhihu.com/question/24702250 简生 的回答 1. W3C 标准 querySelectorAll 属于 W3C 中的 Selectors API ...

关于android:screenOrientation="portrait" 横竖屏切换

当在AndroidManifest.xml文件中定义了android:screenOrientation="portrait",就表示当我们切换横竖屏的时候,屏幕的内容始终以竖屏显 ...