学习内容:
- 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 => {
})
})
})