详解Ajax请求中async参数对同步与异步执行的影响及解决方案

Ajax同步与异步的基本概念

test.html

<a href="javascript:void(0)" rel="external nofollow" onmouseover="testAsync()">
asy.js

function testAsync(){
  var temp;
  $.ajax({
    async: false,  //同步请求
    type : "GET",
    url : 'tet.php',
    complete: function(msg){
      alert('complete');
    },
    success : function(data) {
      alert('success');
      temp=data;
    }
  });
  alert(temp);
}

tet.php

<?php
  echo "here is html code";
  sleep(5);
?>

说明

async: false，其默认值为true。

当设置为false时，表示同步请求。此时testAsync()方法中的Ajax请求会导致整个浏览器界面被锁定，必须等待tet.php执行完毕后，才能继续执行后续操作。

当async设置为true时，Ajax请求以异步方式执行。

这里存在一个常见问题：testAsync()中的Ajax请求与紧随其后的代码是异步执行的。如果tet.php尚未执行完毕，后续代码如alert(temp+' end')可能已经运行。由于变量temp的值仅在Ajax请求的success回调中赋值，此时输出temp往往为空。

----------------------------------------------------

异步请求的数据获取难题与解决方案

由于Ajax默认为异步调用，直接获取其返回值较为困难。但在某些业务场景下，必须通过Ajax获取数据，以下提供两种解决方案。

具体方法如下：

1. 通过设置async:false将异步请求改为同步请求；

2. 将后续需要使用到的参数处理逻辑移至success回调函数内部执行。

这两种方案可根据项目的具体实际情况进行选择。

使用第一种方案（同步）时，如果对性能要求不高，可以考虑采用。

以上关于Ajax请求中async:false/true作用及外部调用问题的分析即为全部内容，希望能为大家提供参考，也希望大家多多支持本站。