foreword
Regarding the content of asynchrony, it is basically the required knowledge of the front end. This article will talk about the basic understanding of asynchrony, understand the emergence of asynchrony and the basic use of promises from the characteristics of js single-threaded, and hope to be helpful to everyone.
single-threaded and asynchronous
- JS is a single-threaded language and can only do one thing at a time
- Browsers and nodejs already support JS startup processes, such as Web Worker
- JS and DOM rendering share the same thread, because JS can modify the DOM structure
Because it cannot get stuck when it encounters waiting (network request, timed task), it needs to be asynchronous, which is called based on the callback form of the callback function.
Let's take an example of asynchronous and synchronous:
Asynchronous:
first print 100, then print 200 a second later, do not wait during the printing process, first print 300
console.log (100)
setTimeout ( function(){
console.log ( 200)
},1000)
console.log (300)
Synchronization:
first print 100, then pop up 200, and then click confirm before printing 300
console.log (100)
alert(200)
console.log (300)
So based on JS is a single-threaded language, asynchronous will not block code execution, and synchronization will block code execution
Asynchronous application scenarios
When would you use asynchrony? That is, when you need to wait:
- Network requests, such as ajax image loading
- Scheduled tasks, such as setTime
For example, in ajax:
print start first, then execute the network request, print end while waiting, and print data1 after the request is successful
console.log( 'start ' )
$.get( './data1.json' , function (data1) {
console.log (data1)
})
console.log ( 'end ')
Image loading:
execute start first, then print end while waiting for the image to be loaded, and finally print loaded when the image is loaded successfully
console.log ('start')
let img = document.createElement( 'img' )
img.onload = function () {
console.log( 'loaded' )
}
img.src = '/xxx. png'
console.log ( 'end' )
In the timer:
the principle is the same as the above, it is mentioned above
console. log (100)
setTimeout ( function(){
console. log (200)
},1000)
console. log (300)
Basic use of Promises
Let's take a look at the code first:
1. First define the getData function, then return a new Promise, and pass another function inside. The function has two parameters resolve and reject.
2. When successful, return the data through resolve. err is executed on failure. That is, it will trigger .then and .catch in the following case accordingly
function getData(url) {
return new Promise((resolve, reject) => {
$.ajax({
url,
success (data) {
resolve (data)
},
error(err) {
reject(err)
}
})
})
}
If you don't understand, don't rush to see how to use it
1. First define three urls
2. .then is the method in the promise above, and data1 is the data obtained through the url
3. return getData(url2) and continue with .then, The latter is the same as the above, and finally .catch catches the error
const url1 = '/data1.json'
const url2 = '/ data2. json'
const url3 = '/ data3.json '
getData(url1) .then ( data1 => {
console.log (data1)
return getData(url2)
}).then(data2 => {
console.log(data2)
return getData(url3)
}).then(data3 => {
console.log (data3)
}).catch(err =>console.error(err))
The .then here is equivalent to connecting in series, going backwards layer by layer
At last
This article is a basic explanation of asynchrony. There are many things that can be investigated about asynchrony. In the future, I will continue to bring you solutions to handwritten promises, async, await, etc., and then sort out this interview. Question, next update! !