javascript - ajax异步请求，同步等待如何做？

问题描述

问 题

作用描述：写了一个搜索框，用户输入关键字后，下面框给出联想词（一般电商网站顶部的搜索框）。

js代码

$('input').keyup(function(){
   var kw = $('input').val();
   querySUG(kw);

})

ajax代码

$.ajax({
   //省略
   success：function(data){
           var data = data;//data从其他网站的接口传过来的json
       
           $.each(data,function(i,element)){
              $('<ul></ul>').append($('<li>element</li>'))
           }
           
           $('<li></li>').click(chooseKeyword);//这一步简化了，是再循环每个li，添加点击事件，如果选择联想词再执行一些操作
        }
})

function  chooseKeyword(){
        //省略
}  

问题来了

1. 其实我ajax只想获取数据，动态生成ul，li标签，我是不想放在ajax的回调函数里的。

2. chooseKeyword这个函数执行，我也不想放在回调函数里
   但其实，我ajax只想获取数据而已，不想把其他的都放在回调函数里，但后续的操作都是要等ajax请求完后才能操作，比如动态生成标签li，添加点击事件等

---

所以就是我说的‘异步请求，同步等待’：能不能有方法/函数，是等ajax异步请求后，再执行的函数，，或者是有更好的方法，麻烦大神指点一下，谢谢！

解决方案

最好的办法就是在回调函数里写。
当然逻辑都写到回调函数里肯定不优雅，所以es7推出了 async await关键字，配合promise就可以以同步的方法写异步，浏览器上可以用babel编译为es5，模拟async await。

或者直接把异步请求改成同步，当然这样会阻塞整个js线程，网页会卡。

async await和promise的使用很简单，你只需要在请求的地方使用await，然后在包含了await的函数前加上async就可以了，示例如下

async function req(){
     await fetch("www.baidu.com");
     //业务代码
}

Jquery 异步改同步需要直接调用$.ajax函数，如

$.ajax('www.baidu.com', {
    method: 'get',
    async: false
})
//业务代码

这篇关于javascript - ajax异步请求，同步等待如何做？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！