Pre knowledge of asynchronous operation

Catalog

JS It's a single-threaded language

Why? JS It's a single-threaded language

Synchronization task

Asynchronous task

 Ajax request

Callback Hell Back to hell

---

JS It's a single-threaded language

• Only one task can be processed at a time
• Single thread means , All tasks need to be queued , The previous task is over , To perform the next task
• If the previous task took a long time , Then the latter task has to wait
• So ,JS Designers divide all tasks into two categories , Synchronous and asynchronous

Why? JS It's a single-threaded language

• As a browser scripting language ,JavaScript Its main purpose is to interact with users , And operation DOM 

Synchronization task

• Only the previous task was completed , To perform the next task

Asynchronous task

• When the synchronization task is executed to a certain WebAPI Trigger asynchronous operation when , here The browser will open a separate thread to handle these asynchronous tasks

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

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

•   Please think about the output below ？

console.log(1)
setTimeout(() => { //  Asynchronous task , Put it in the task queue 
    console.log(2)
}, 0)
console.log(3)

// 1、3、2

The following figure illustrates the execution process of synchronous and asynchronous tasks

 Ajax request

 Ajax Is asynchronous JavaScript and XML, It's about creating interactive 、 Web development technology of fast dynamic web application , Without reloading the entire page , Technology to update some web pages . Through a small amount of data exchange with the server in the background ,Ajax Asynchronous update of web pages . This means that you can load the entire page without reloading it , Update a part of the web page .

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

//  Send a request 
xmlhttp.open('GET', url, true)
xmlhttp.send()

//  Server response 
xmlhttp.onreadystatechange = function(){
	if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
		const res = JOSN.parse(xmlhttp.responseText)
		console.log(res)
	}
}

/**
* XMLHttpRequest  Object is used to exchange data with the server in the background 
* onreadystatechange  Event storage function 
* readyState  Available status 
* 0  Request not initialized 
* 1  Server connection established 
* 2  Request received 
* 3  Request processing 
* 4  Request completed , And the response is ready 
*/

Callback Hell Back to hell

• Multi level nesting of functions is called “ Back to hell callback hell” perhaps “ Back to the abyss ”, It refers to nested functions in functions
• Top up ajax The request is encapsulated into a function

//  hold  ajax  The requested data is returned by a callback function 
function ajax(url, callback){
	//  send out  ajax  request 
	let xmlhttp
	if(window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest()
	} else {
		xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
	}

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

	// onreadystatechange  Event storage function 
	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'
//  Multi level nesting of functions is called  “ Back to hell  callback hell”  perhaps  “ Back to the abyss ”, It refers to nested functions in functions 
ajax(url1, res => {
	console.log(res)
	ajax(url2, res => {
		console.log(res)
		ajax(url3, res => {
			console.log(res)
		})
	})
})