What is asynchrony? What is synchronization
asynchronous
If you can get the results directly, it’s synchronous;
For example: register at the hospital and leave the window when you get the number.
If you can’t get the results directly, it’s asynchronous.
Example: Wait at the restaurant so you can go shopping when you get the number
When can we actually eat?
You can ask in the restaurant every 10 minutes.
You can also scan code to receive notifications with wechat (callback)
The callback callback
A callback is a function that is written but not called.
For example:
I’m going to give function 1 to another function 2
function f1(){}
function f2(fn){
fn()
}
f2(f1)
Copy the code
Analysis:
- I call the
f1
No? Answer: No call - I put the
f1
To pass tof2
Is there anyone else? Answer: the pass f2
Call thef1
No? A:f2
Call thef1
- So,
f1
That’S what I wrotef2
Function called, so,f1
Is the callback.
Asynchrony and callback
associated
- Asynchronous tasks need to notify JS to get the results when they get them
- How to notify?
- You can ask JS to leave a function address to the browser
- The browser calls this function address when the asynchronous task is complete
- It also passes the result as an argument to the function
- This is a callback function that I wrote for the browser to call
The difference between
- Asynchronous tasks need to use callback functions to notify results, or polling can be used
- But callbacks are not necessarily limited to asynchronous tasks
- Callbacks can be used in synchronization tasks
arry.forEach(n => console.log(n))
It’s a synchronous callback
Judge synchronous asynchrony
If the return value of a function is
setTimeout
AJAX
(i.e., the XMLHttpRequest)AddEventListener
- If the return value is inside these three things, then the function is asynchronous
AJAX can be set to synchronous, but doing so will cause the page to freeze during requests. Do not use it.
For example 1
functionRoll the dice,){
setTimeout(() = >{
return parseInt(Math.random() * 6) +1},1000)
// return undefined
}
Copy the code
Analysis of the
Roll the dice ()
Didn’t writereturn
, that is,return undefined
- The arrow function has it
return
Returns the real result - So this is an asynchronous function/task
For example 1 to continue
constN = roll the diceconsole.log(n) //undefined
Copy the code
How do I get asynchronous results
- A: You can use a callback. Write a function, and give it the address of the function
function f1(x){console.log(x)} Roll dice (f1)Copy the code
- And then I asked the dice roll function to get the result and pass it in as an argument
f1
functionRoll the dice,fn){
setTimeout(() = >{
fn(parseInt(Math.random() * 6) +1)},1000)}Copy the code
Simplified arrow function
Since f1 is only used once after the declaration, you can delete f1
function f1(x){console.log(x)} Roll dice (f1)Copy the code
Change to
Roll the dice,x= > {
console.log(x)
})
Copy the code
To simplify the
Roll the dice,console.log)
// If the number of arguments is inconsistent, this cannot be simplified
Copy the code
summary
- Asynchronous tasks cannot get results
- So we pass a callback to the asynchronous task
- The callback is invoked when the asynchronous task completes
- Call with the result as an argument
What if an asynchronous task has two outcomes, success or failure
Two results
- Method one: The callback takes two arguments
fs.readFile('./1.txt'.(error, data) = >{
if(error){console.log('failure'); return}
console.log(data.toString()) / / success
})
Copy the code
- Method 2: Pass two callbacks
ajax('get'.'/1.json', data()=>{}, error()=>{})
// The first function is a success callback and the second function is a failure callbackAnother form: Ajax ('get'.'/1.json', {
success: () = >{}, fail: () = >{}})// Accept an object with two keys representing success and failureCallbacks do not have to be in the form of functions; they can also be in the form of objectsCopy the code
- The shortcomings of these methods
No matter method one or method two, there is a problem
- Non-standard, various names, some people use success+error, some people use success+fail, some people use done+fail
- Prone to callback hell, code becomes unreadable
- Error handling is difficult
Promise
Promise is a unified front-end solution to asynchronous problems
Use AJAX wrapping as an example to explain the use of promises
ajax = (method, url, options) = >{
const {success, fail} = options // Destruct assignment
const request = new XMLHttpRequest()
request.open(method, url)
request.onreadystatechange = () = >{
if(request.readyState === 4) {//成功就调用success,失败就调用fail
if(request.status < 400){
success.call(null, request.response)
}else if(request.status >= 400){
fail.call(null, request, request.status)
}
}
}
request.send()
}
Copy the code
ajax('get'.'/xxx', {
success(response){}, fail: (request, status) = >{}})// The function abbreviation is on the left and the arrow function is on the right
Copy the code
I’ll write it as Promise
ajax('get'.'/xxx', {
success(response){}, fail: (request, status) = >{}})// Two callbacks are used, as well as success and fail
// Make a promise
ajax('get'.'/xxx')
.then((response) = >{}, (request) = >{}) // Promise specifies that either a successful callback or a failed callback can accept only one parameter
Copy the code
It is also a callback, but you do not need to remember success and FAIL;
The first argument to then is success, and the second argument to then is fail.
Ajax () returns an object containing the.then() method,
So how do you get this object that has dot then?
Then you need to modify the ajax source code
ajax = (method, url, options) = >{
return new Promise((resolve, reject) = >{
const {success, fail} = options
const request = new XMLHttpRequest()
request.open(method, url)
request.onreadystatechange = () = >{
if(request.readyState === 4) {// Call resolve on success, reject on failure
if(request.status < 400){
resolve.call(null, request.response)
}else if(request.status >= 400){
reject.call(null, request)
}
}
}
request.send()
})
}
Copy the code
summary
How to change a callback to an asynchronous functionpromise
Asynchronous function of?
- The first step
return new promise ((resolve, reject)=>{... })
- Called if the task succeeds
resolve(result)
- Called if the task fails
reject(error)
resolve
andreject
The successful and failed functions are called again
resolve
andreject
Is not.then(success, fail)
The inside of thesuccess
andfail
, resolve calls success, reject calls fail.
- The second step
- use
.then(success, fail)
Pass in the success and failure functions
Promise is used more advanced, and then more
The disadvantages of AJAX encapsulated above
- Post failed to upload data. Procedure
Request. Send (where you can upload data)
- The request header cannot be set
request.setRequestHeader(key, value)
- How to solve
Using jquery. ajax (although jquery. ajax is perfect and powerful, it is outdated and more axios is used)
Use Axios (see Fang Yinghang’s blog)
Expand knowledge:
Promise can’t be cancelled, but Axios can, because Axios invented cancelToken.