js的同步和异步以及ajax

同步，就是发出一个功能调用时，在没有得到结果之前，该调用就不返回或者继续执行后续操作。

异步，则可以在发出功能调用后，不需要得到结果，也可以继续执行后续操作。

可以打开F12直接感受一下

console.log(0);
alert(2);
console.log(1);
// setTimeout就是一个基础的异步操作
setTimeout(() => {
    alert(3)
}, 100);
console.log(4);

控制台先打印0， 然后弹窗2跳出（此时控制台并没有打印1），确认弹窗后，控制台才打印1，这就是同步

然后弹窗3但是控制台不需要确认弹窗直接打印4（这里执行顺序是先打印4后弹窗），这就是异步

javascript是单线程的（具体可以看最底下的参考资料1），所以如果应用需要请求，但是得到不结果的时候，就需要一直等待得到请求结果才去执行后续操作，这样子等待时间是特别长的

当涉及到请求，我的第一反应是就是ajax，我的想法就是ajax异步请求

ajax异步请求的目的就很明显了，使得浏览器在请求的同时也可以进行其他操作，这样就可以大幅减少用户的等待时间

但是，ajax并不等于异步，直接上代码

let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
// ajax第三个参数是async，默认为true（异步）
xhr.open('GET', 'http://localhost:3000', true);
// 必须写在open和send中间
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xhr.onreadystatechange = function () {
     if(xhr.readyState === 4) {
        if(xhr.status === 200) {
            console.log('成功');
            // console.log(xhr.response);
         }else {
            console.log('请求失败');
        }
    }else {
        console.log('正在请求');
    }
};
xhr.send();
console.log('我在这里，xhr在哪');

 执行结果如下

xhr.open(method, url, async)

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步），默认为true

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

当async为true的时候，靠后的操作是不需要等待ajax请求结果的

我们来看看将async改为false之后

let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
// ajax第三个参数是async，默认为true（异步）
xhr.open('GET', 'http://localhost:3000', false);
// 必须写在open和send中间
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xhr.onreadystatechange = function () {
     if(xhr.readyState === 4) {
        if(xhr.status === 200) {
            console.log('成功');
            // console.log(xhr.response);
         }else {
            console.log('请求失败');
        }
    }else {
        console.log('正在请求');
    }
};
xhr.send();
console.log('我在这里，xhr在哪');

执行结果如下

可以看到，靠后的操作需要在ajax得到结果之后才会执行

 

参考资料：

1. JavaScript 运行机制详解：再谈Event Loop