Asynchronous and promise

Zhiyou 2021-09-15 09:08:39

What is asynchronous ? What is synchronization


If you can get the results directly , It's synchronization ;

give an example : Register at the hospital site , Get the number before you leave the window .

If you can't get the results directly , It's asynchronous .

give an example : Wait at the restaurant door , After you get the number, you can go shopping

When can we really eat ?

You can every 10 Go to the restaurant and ask in minutes ( polling )

You can also scan the code and use wechat to receive notifications ( Callback )

Callback callback

Write but don't call , Functions called to others , It's a callback .

give an example :

Put function 1 Give another function 2

function f1(){}
function f2(fn){
 Copy code 

analysis :

  • I called f1 No, ? answer : There is no call
  • I put f1 Pass to f2( others ) Have you ? answer : Yes
  • f2 Called f1 No, ? answer :f2 Called f1
  • that ,f1 I wrote it to f2 Called function , therefore ,f1 It's a callback .

The relationship between asynchrony and callback


  • Asynchronous tasks need to be notified when they get results JS Here's the result
  • How to inform ?
  • It can make JS Leave a function address for the browser
  • When the asynchronous task is completed, the browser can call the function address
  • At the same time, the result is passed to the function as a parameter
  • This function I wrote to the browser to call , So it's a callback function


  • Asynchronous tasks need to use callback functions to notify results , You can also use polling
  • But callback functions don't have to be used only in asynchronous tasks
  • Callbacks can be used in synchronization tasks
  • arry.forEach(n => console.log(n)) It's synchronous callbacks

Judge synchronous and asynchronous

If the return value of a function is in

  • setTimeout
  • AJAX( namely XMLHttpRequest)
  • AddEventListener
  • If the return value is inside these three things , So this function is asynchronous

AJAX Can be set to synchronous , But doing so will cause the page to get stuck during the request , Do not use .

give an example 1

function Dice (){
return parseInt(Math.random() * 6)+1},1000)
// return undefined
 Copy code 


  • Dice () Didn't write return, That's it return undefined
  • The arrow function has return, Return to the real result
  • So this is an asynchronous function / Asynchronous task

give an example 1 To continue

const n = Dice ()
console.log(n) //undefined
 Copy code 

How to get asynchronous results

  • answer : You can use callback . Write a function , Then give it the function address
function f1(x){console.log(x)}
Dice (f1)
 Copy code 
  • Then I asked the roll dice function to get the result and pass the result as a parameter to f1
function Dice (fn){
fn(parseInt(Math.random() * 6)+1)},1000)
 Copy code 

Simplified arrow function

because f1 Only once after the declaration , So you can delete f1

function f1(x){console.log(x)}
Dice (f1)
 Copy code 

Change to

 Dice (x => {
 Copy code 

Simplify it to

 Dice (console.log)
// If the number of parameters is inconsistent, it cannot be simplified like this 
 Copy code 


  • Asynchronous tasks don't get results
  • So we send a callback to the asynchronous task
  • Call the callback when the asynchronous task is completed
  • When called, take the result as a parameter

If an asynchronous task has two results , Success or failure , What do I do

Two results

  • Method 1 : The callback takes two parameters
fs.readFile('./1.txt',(error, data)=>{
if(error){console.log(' Failure '); return}
console.log(data.toString()) // success 
 Copy code 
  • Method 2 : Pass two callbacks
ajax('get', '/1.json', data()=>{}, error()=>{})
// The previous function is a successful callback , The following function is the failure callback 
Another form :
ajax('get', '/1.json', {
success: ()=>{}, fail: ()=>{}
// Accept an object , There are two objects key Indicates success and failure 
Callbacks don't have to be in the form of functions , You can also use the form of objects
 Copy code 
  • The shortcomings of these methods

Whether method one or method two , All have problems

  1. No specification , There are many different names , Someone uses it success+error, Someone uses it success+fail, Someone uses it done+fail
  2. Prone to callback hell , The code becomes unintelligible
  3. It's hard to do error handling


promise It is a unified solution for the front-end to solve asynchronous problems

With AJAX For example , explain Promise Usage of

ajax = (method, url, options)=>{
const {success, fail} = options // An analytic assignment 
const request = new XMLHttpRequest(), url)
request.onreadystatechange = ()=>{
if(request.readyState === 4){
// If successful, call success, Fail to call fail
if(request.status < 400){, request.response)
}else if(request.status >= 400){, request, request.status)
 Copy code 
ajax('get', '/xxx', {
success(response){}, fail: (request, status)=>{}
}) // On the left is function abbreviation , On the right is the arrow function 
 Copy code 

Change to Promise How to write it

ajax('get', '/xxx', {
success(response){}, fail: (request, status)=>{}
// Two callbacks are used above , Also used. success and fail
// Change to promise How to write it 
ajax('get', '/xxx')
.then((response)=>{}, (request)=>{}) //promise Specifies that both successful callback and failed callback can only accept one parameter 
 Copy code 

Although it is also a callback , But you don't need to remember success and fail 了 ;

then The first parameter of is success,then The second parameter of is fail;

ajax() Returns a message containing .then() Object of method ,

So how do you get this containing .then The object of ?

Then we need to transform ajax Source code

ajax = (method, url, options)=>{
return new Promise((resolve, reject)=>{
const {success, fail} = options
const request = new XMLHttpRequest(), url)
request.onreadystatechange = ()=>{
if(request.readyState === 4){
// If successful, call resolve, Fail to call reject
if(request.status < 400){, request.response)
}else if(request.status >= 400){, request)
 Copy code 


How to turn the asynchronous function of a callback into promise The asynchronous function of ?

  1. First step
  • return new promise ((resolve, reject)=>{...})
  • If the task succeeds, call resolve(result)
  • If the task fails, call reject(error)
  • resolve and reject The success and failure functions are called again

resolve and reject Not at all .then(success, fail) Inside success and fail,resolve call success,reject call fail.

  1. The second step
  • Use .then(success, fail) Pass in success and failure functions

promise More advanced usage , And then more

The above encapsulated AJAX The shortcomings of

  • post Unable to upload data

request.send( Here you can upload data )

  • Cannot set request header

request.setRequestHeader(key, value)

  • How to solve

Use jQuery.ajax ( although jQuery.ajax Very perfect and powerful , But it's out of date , More in use axios)

Use axios( For reference, Fang Yinghang blog

Expand your knowledge :

promise It can't be cancelled , however axios May cancel , because axios Invented cancelToken.

Please bring the original link to reprint ,thank
Similar articles