Vue用axios实现同步
在vue项目中我们经常会使用axios来与后台进行数据传输，异步请求可以改善用户体验。但是在某些特殊情况，我们依然需要使用同步请求来实现交互。本文将讲解如何在vue项目中使用axios实现同步问题分析我们知道，在传统的ajax方法中，我们可以使用参数async设置为false来表示同步请求
$.ajax({
type : "POST", //请求方式
async: false, // fasle表示同步请求，true表示异步请求
contentType: "application/json;charset=UTF-8", //请求的媒体类型
url : "http://127.0.0.1/admin/list/",//请求地址
data : JSON.stringify(list), //数据，json字符串
success : function(result) { //请求成功
console.log(result);
},
error : function(e){ //请求失败，包含具体的错误信息
console.log(e.status);
console.log(e.responseText);
}
});
但是在axios的文档中，并没有找到类似的参数。因此单纯的通过axios是实现不了同步数据交互。
在浏览了其它博客后，了解到ES7的异步特性async / await，async修饰的异步方法，需要等待await修饰的语句执行完毕。这跟我们想要的同步请求效果一样，在执行完A事件，并成功返回后，才会去执行B事件。
还有一种方法就是在vue项目中安装jquery,使用jquery的async属性，但是不太推荐。
ES7的异步特性async / await
async用于申明一个函数是异步的，await等待异步请求完成，await只能在async方法中使用。
var fun1 = async function(){
await axios.get(url,params);
...
}
在调用fun1的方法中我们需要修饰为async异步方法，并且await修饰fun1方法。
var fun2 = async function(){
await fun1();
}
在Vue项目中实现
getInfoFn: async function(){
var that = this;
await that.$api.scheduleApi.queryScheduleInfoFn(
{caseNo: that.basicInfo.caseNo}).then(function (response) {
if(response.data.code == '200') {
var result = response.data.result;
}
});
},
// 调用getInfoFn()也需要修饰为异步
changeConfigFn: async function(config){
await this.getSheduleInfoFn();
// 执行其它操作
}
这样我们可以等待数据返回成功后，执行其它操作了
总结
本文简单的介绍了如何使用ES7的异步特性async / await来实现axios进行同步请求了。
同时要设置响应时间为timeout:200000单位是毫秒，这样的话请求就不会超时，后端的请求数据较多时进行等待后端的请求结束之后,才会有响应，不会出现响应超时的问题。
ヾ(≧O≦)〃嗷~