陕西省建设部官方网站,英文网站首页优化,网站建设 网页,做网站石家庄终于将vue-resource替换成axios了#xff0c;其中像application/x-www-form-urlencoded发送的头信息以及返回的response结果这两点都需要注意一下。 其实https://github.com/mzabriskie/axios也有说明的。因为我在vue-resource中使用了Vue.http.options.emulateJSON true;其中像application/x-www-form-urlencoded发送的头信息以及返回的response结果这两点都需要注意一下。 其实https://github.com/mzabriskie/axios也有说明的。因为我在vue-resource中使用了Vue.http.options.emulateJSON true;这种请求在发送头信息时会将Content-Type改为application/x-www-form-urlencoded。 而若使用axios的话就是坑爹的request payload不是form data参数。 为了达到Content-Type这种效果作者提供了两种方法。第一种使用new URLSearchParams()但是这种方法兼容有点不好。 var params new URLSearchParams();
params.append(param1, value1);
params.append(param2, value2);
axios.post(/foo, params);所以我使用的是第二种方法使用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; //封装ajaxvar 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; 可以完善的地方还有很多欢迎拍砖~
