JavaScript单线程与异步编程：Ajax、Promise与Callback地狱-优快云博客

本文链接：https://blog.youkuaiyun.com/taoqidejingling/article/details/122984154

JS 是单线程语言

同一个时间只能处理一个任务
单线程意味着，所有任务都需要进行排队，前一个任务结束，才能执行后一个任务
如果前一个任务耗时很长，那么后一个任务就不得不一直等待
于是乎，JS 设计者们把所有任分成两类，同步和异步

为什么 JS 是单线程语言

作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM

同步任务

只有前一个任务执行完毕，才能执行后一个任务

异步任务

当同步任务执行到某个 WebAPI 时触发异步操作，此时浏览器会单独开线程去处理这些异步任务

 // 同步
 const a = 2
 const b = 3
 console.log(a + b)

 // 异步
 setTimeout(() => {
     console.log(a + b)
 }, 1000)

请思考下面的输出结果是什么？

console.log(1)
setTimeout(() => { // 异步任务，放入任务队列中
    console.log(2)
}, 0)
console.log(3)

// 1、3、2

下图说明了同步任务和异步任务的执行过程

Ajax 请求

Ajax 是异步 JavaScript 和 XML，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

// 创建 XMLHttpRequest 对象
const url = 'http://jsonplaceholder.typicode.com/users'
let xmlhttp
if(window.XMLHttpRequest){
	xmlhttp = new XMLHttpRequest()
} else {
	xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
}

// 发送请求
xmlhttp.open('GET', url, true)
xmlhttp.send()

// 服务端响应
xmlhttp.onreadystatechange = function(){
	if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
		const res = JOSN.parse(xmlhttp.responseText)
		console.log(res)
	}
}

/**
* XMLHttpRequest 对象用于在后台与服务器交换数据
* onreadystatechange 事件存储函数
* readyState 可用状态
* 0 请求未初始化
* 1 服务器连接已建立
* 2 请求已接收
* 3 请求处理中
* 4 请求已完成，且响应就绪
*/

Callback Hell 回调地狱

函数多层嵌套被称为 “回调地狱 callback hell” 或者 “回调深渊”，指的是函数内嵌套函数
把上面 ajax 请求封装成一个函数

// 把 ajax 请求的数据用回调函数返回
function ajax(url, callback){
	// 发送 ajax 请求
	let xmlhttp
	if(window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest()
	} else {
		xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
	}

	xmlhttp.open('GET', url, true)
	xmlhttp.send()

	// onreadystatechange 事件存储函数
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			const result = JSON.parse(xmlhttp.responseText)
			callback(result)
		}
	}
}

const url1 = 'http://jsonplaceholder.typicode.com/users'
const url2 = 'http://jsonplaceholder.typicode.com/todos'
const url3 = 'http://jsonplaceholder.typicode.com/photos'
// 函数多层嵌套被称为 “回调地狱 callback hell” 或者 “回调深渊”，指的是函数内嵌套函数
ajax(url1, res => {
	console.log(res)
	ajax(url2, res => {
		console.log(res)
		ajax(url3, res => {
			console.log(res)
		})
	})
})

Promise 对象_taoqidejingling的博客-优快云博客Promise Ajax 请求函数封装；Promise 优势；Promise 内部状态；Promise 原型链方法；Promise 静态方法6个；https://blog.youkuaiyun.com/taoqidejingling/article/details/122990974 ES8：async await 更加优雅的异步编程解决方案_taoqidejingling的博客-优快云博客async 和 await 是一种更加优雅的异步编程解决方案，await 后面返回的是一个 Promise 对象；await 后面跟的代码会变成同步任务；案例使用 async await 发送接口请求https://blog.youkuaiyun.com/taoqidejingling/article/details/123097323