井井客

搜索

vue2使用axios代替vue-resource

终于将vue-resource替换成axios了,其中像application/x-www-form-urlencoded发送的头信息以及返回的response结果这两点都需要注意一下。

vue2使用axios代替vue-resource

其实https://github.com/mzabriskie/axios也有说明的。因为我在vue-resource中使用了Vue.http.options.emulateJSON = true;,这种请求在发送头信息时会将Content-Type改为application/x-www-form-urlencoded,而若使用axios的话,为了达到这种效果作者提供了两种方法。

第一种使用new URLSearchParams(),但是这种方法兼容有点不好。所以我使用的是第二种方法,使用node_modules文件夹中的qs模块。

因为我之前已经将ajax请求稍微封装了一下(下面说的代码基本都是在ajax.js中添加的),所以改动其实真不多。

安装axios模块就不说了,先将axios和qs引用进来。

import axios from 'axios';
import qs from 'qs';

然后将发送的请求参数外面使用qs.stringify进行包裹。

qs.stringify( data )

最后将接受的结果,提取正确的字段。(在vue-resource中正文件是response.body,而在axios中正文则是response.data。这个需要注意一下)

console.log(response.data)   //这个打印出来的就是返回的结果

其中response中则有一些请求状态等等相关的参数,我这边很少用到,所以就不列出来了。

只需上面三步,就完成了vue-resource到axios的转换。同时解决了axios发送x-www-form-urlencoded的需求,特别方便吧~

另外贴上我整个ajax.js文件,中间用到了加密解密,可以无视一下。

import Vue from 'vue';
import axios from 'axios';
import qs from 'qs';

//导入数据加密方法
import secretJS from './secret';

//当前运行环境
var domain = 'XXX';

//封装ajax
var ajax = {
	//通用的ajax-post
	common:function(url,data,sucFn,secret,errFn){
		//param说明
		//@url		ajax访问的url
		//@data		post发送的数据
		//@sucFn	ajax成功时运行函数
		//@errFn	ajax失败时运行函数(大部分为缺省,但例如登录出错时则需要)

		//发送ajax
		axios.post(domain + url , qs.stringify(secretJS.reData(data,secret)) ).then(
			(response) => {
				//先判断appId是否已经过期
				if(response.data != 'appId not exist'){
					//解密数据
					var rs = JSON.parse(secretJS.backSecret(response.data,secret));
					//如果
					if(rs.success == true)	sucFn(rs);
					else{
						if(errFn === undefined){
							//(退出登录或私钥+ID丢失)后访问页面-提示过期
							this.$router.push('/expired');
						}else{
							errFn(rs);
						}
					}
				}else{
					//否则跳转到温馨提示登录过期页面
					this.$router.push('/login');
				}
			}
		)
		//ajax完成
	}
}

export default ajax;

可以完善的地方还有很多,欢迎拍砖~

文章TAG:VUE

作者:井井客原创来源:原创
本文标题:vue2使用axios代替vue-resource
本文链接:/c/09260.html

上一篇:如何更方便的管理vue全局组件
下一篇:没有退出接口的页面实现退出功能流程图

文章分类

相关阅读

随便看看