学习笔记 JavaScript ES6 异步操作必备知识 单线程 Ajax_es6中ajax原理

学习内容：

• JS是单线程的
• 同步任务与异步任务
• Ajax
• Callback Hell

JS是单线程的

单线程就是同一时间只做一件事，比如超市收银员结账，所以单线程就需要排队。

同步任务与异步任务

const a = 6
const b = 7
console.log(a + b) // 同步操作
 
// 异步操作
setTimeout(() => {
    console.log(a + b)
}, 1000);

再来看下面这个setTimeout(0)的例子：

小技巧：setTime()最小开始执行时间不是0，是4毫秒

判断下面的输出顺序是1，2，3，还是 1，3，2

console.log(1);
// 异步操作
setTimeout(() => {
    console.log(2)
}, 1000);
console.log(3);
 
--------
1
3
2

这个结果说明，需要等主线程中同步操作全都执行完以后，才开始执行异步操作。

Ajax

这是JS非常原始的发送http请求的例子，是Ajax的原理：

 
// 1、创建XMLHttpRequest对象
var xmlhttp
var url = 'http://jsonplaceholder.typicode.com/users'
 
// window.XMLHttpRequest这个对象存在，说明当前浏览器是IE7+或chrome
if(window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest()
} else { // 兼容早期浏览器
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
}
 
// 2、发送请求
xmlhttp.open('GET', url, true)
xmlhttp.send()
 
// 3、接收服务端响应
xmlhttp.onreadystatechange = function () {
    if(xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        var obj = JSON.parse(xmlhttp.responseText)
        console.log(obj);
    } 
}
 
-----------------------------------------------------------
(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

把上面的代码封装成一个方法：

function ajax(url, callback) {
  var xmlhttp;
  // 1、创建XMLHttpRequest对象
  // window.XMLHttpRequest这个对象存在，说明当前浏览器是IE7+或chrome
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    // 兼容早期浏览器
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 
  // 2、发送请求
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
 
  // 3、接收服务端响应
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
      var obj = JSON.parse(xmlhttp.responseText);
      callback(obj)
    }
  };
}
 
var url = "http://jsonplaceholder.typicode.com/users";
 
// 这里定义一个方法，在请求回来之后能够得到结果
ajax(url,res => {
    console.log(res)
})
 
-----------------------------------------------------------
(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Callback Hell 

可读性差，维护性差，ES6中的异步解决方案可以解决这些问题

ajax('a.json',res => {
    ajax('b.json',res => {
        ajax('c.json',res => {
        })
    })
})