异步请求导致达不到预期的效果
最近在开发时遇到一个问题,需求是:需要先调用某一个请求加载数据,然后再调用另一个请求获取另一部分数据,二者有顺序之差,必须先调用第一个请求进行相关数据加载,然后再调用第二个请求进行相关操作;
我想到了异步请求,于是直接上手,编写了两个post请求方法并开始直接调用,代码如下:
$(function() { function getTextDetail() { $.post("/public/GetTextDetail", { "id": id }, function(res) { if (res && res.Result) { if (res.Data != undefined && res.Data != null && res.Data.length > 0) { //展示聊天记录 setChat(res.Data); } } else { console.log(res.Message); } }, callBack); }; function checkQuestionFinal(tradeId) { $.post("/public/checkQuestionFinal", { "tradeId": tradeId }, function(res) { if (res && res.Result) { //展示success showMsg("success"); } }); } getTextDetail(); checkQuestionFinal(window.tradeId); });
在写好这段代码后,马上着手进行了调试,第一次没有出现什么问题(应该是请求响应刚好第一个请求比第二个请求快,故没有导致错误的发生),当我以为这样正确的时候,接下来再次运行调试,我发现了错误,居然先展示了success,然后再展示的聊天记录,我意识到发生错误了,于是我开始查看代码并思考逻辑,由于不太熟悉(刚毕业不到一年,经验不是很丰富),所以没有考虑到异步请求是同时发送请求,但是请求响应快的会先返回,所以会先执行响应快的操作,由于需求是必须按照先后顺序来执行操作,于是我改变了写法,代码如下:
$(function() {
function checkQuestionFinal(tradeId) { $.post("/public/checkQuestionFinal", { "tradeId": tradeId }, function(res) { if (res && res.Result) { showMsg("success"); } }); } function takeAction() { $.ajax({ url: "/public/GetTextDetail", data: { "id": id }, type: "post", success: function (res) { if (res && res.Result) { if (res.Data != undefined && res.Data != null && res.Data.length > 0) { setChat(res.Data); } } else { console.log(res.Message); } }, complete: function (res) { checkQuestionFinal(window.tradeId); } }); } });
以上方法即在执行完第一个请求完成后才会去执行第二个请求,这样就不会出现由于请求响应快慢的问题导致与预期结果不一致的问题了。我还是个菜鸟,需要多多学习,如有问题,忘各位大佬指正