Promise up (asynchronous or synchronous)

Nine tube mother 2021-05-03 20:52:04
promise asynchronous synchronous


asynchronous or Sync

Sync :

The idea of synchronization is : All the operations are done , To return it to the user . So users wait too long online , Give users a feeling of being stuck ( It's system migration , Click migration , The interface doesn't move , But the program is still running , The feeling of being stuck ). In this case , The user cannot close the interface , If it's turned off , That is, the migration program is interrupted .

asynchronous :

Put user requests in message queue , And feed back to users , System migration has started , You can close the browser . Then the program slowly writes to the database . This is asynchronous . But users don't feel stuck , I will tell you. , Your request system has responded . You can close the interface .

Asynchronous example :( With AJAX For example )

  • request.send() after , Not directly response
  • We have to wait until readyState Turn into 4 in the future , browser return head transfer use request.onreadystatechange function
  • Only then can we get request.response

Synchronization and asynchrony are relative in themselves

Synchronization is like When the client sends a request to the server , While waiting for the server to respond to the request , The client doesn't do anything else . When the server is finished, it returns to the client . In this case, the client needs to wait all the time . Users will be unfriendly to use .

Asynchronous is , When the client sends a request to the server , The server is waiting for the response , The client can do other things , This saves time , Improved efficiency .

There is a reason for being Although asynchronous is good But some problems need to be solved by synchronization , For example, what we need is to get the returned data for operation . These are things that asynchrony can't solve .

Judge synchronous and asynchronous

If the return value of a function is in

  • setTimeout
  • AJAX, namely XMLHttprequest( Don't put the AJAX Set to sync , This will cause the page to jam during the request )
  • addEventListener
  • To be continued

Internal , So this function is asynchronous

Callback (callback)

  • Functions written for other people
  • In Chinese ,【 come back 】 It also means the future , Such as 【 I'll treat you to dinner later 】

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 ( Phone number ) To the browser
  • When an asynchronous task completes , The browser calls the function address ( Make a phone call )
  • And pass the result as a parameter to the function ( It said on the phone that I could come and eat )
  • This function is written for the browser to call , So it's a callback function


  • Asynchronous tasks can use callback functions to notify results , It can also be obtained by polling , Polling is to ask whether the result has been obtained .
  • But callback functions don't have to be used only in asynchronous tasks
 Such as :
It's synchronous callbacks
 Copy code 

The drawback of callbacks

  • No specification , There are many different names
  • It's easy to see hell , The code becomes unintelligible
  • It's hard to do error handling

How to solve these three problems ?

  • Specifies the name or order of callbacks
  • Refuse to call back to hell , Make code more readable
  • It's easy to catch errors
本文为[Nine tube mother]所创,转载请带上原文链接,感谢

  1. Analysis of MVC
  2. [middle stage] please stay and join me in the backstage
  3. Understanding front end garbage collection
  4. [continuous update] front end special style implementation
  5. Flutter product analysis and package reduction scheme
  6. XPath positioning
  7. 前端开发css中的flex布局的使用
  8. The use of flex layout in front end development CSS
  9. JQuery核心函数和静态方法
  10. JQuery core functions and static methods
  11. Node family - understanding of blocking and non blocking
  12. 热点微前端Microfrontend的讨论:谷歌AdWords是真实的微前端
  13. Vue source code analysis (2) initproxy initialization proxy
  14. What's TM called react diff
  15. Summary of common front end data structure
  16. Useeffect in hooks
  17. [encapsulation 02 design pattern] Command pattern, share meta pattern, combination pattern, proxy pattern, strategy pattern
  18. Front end notes: virtual Dom and diff of vue2. X
  19. The best code scanning plug-in of flutter
  20. The simplest plug-in for rights management of flutter
  21. 21. Object oriented foundation "problems and solutions of object traversal"
  22. Discussion on hot micro front end: Google AdWords is a real micro front end
  23. Usecallback and usememo for real performance optimization
  24. 【前端圭臬】十一:从规范看 JavaScript 执行上下文(下)
  25. [front end standard] 11: Javascript execution context from the perspective of specification (2)
  26. Hexagonal六角形架构ReactJS的实现方式 - Janos Pasztor
  27. Transaction of spring's reactive / imperative relational database
  28. The implementation of hexagonal hexagonal reactjs Janos pasztor
  29. HTTP状态码:402 Payment Required需要付款 - mozilla
  30. HTTP status code: 402 payment required - Mozilla
  31. Factory mode, constructor mode and prototype mode
  32. Build the scaffold of react project from scratch (Series 1: encapsulating a request method with cache function based on Axios)
  33. Cocos Quick Start Guide
  34. Comparison of three default configurations of webpack5 modes
  35. A case study of the combination of flutter WebView and Vue
  36. CSS: BFC and IFC
  37. A common error report and solution in Vue combat
  38. JS: this point
  39. JS: prototype chain
  40. JavaScript series -- promise, generator, async and await
  41. JS: event flow
  42. Front end performance optimization: rearrangement and redrawing
  43. JS - deep and shallow copy
  44. JavaScript异步编程3——Promise的链式使用
  45. JavaScript asynchronous programming 3 -- chain use of promise
  46. Vue.js组件的使用
  47. The use of vue.js component
  48. How to judge whether a linked list has links
  49. Element UI custom theme configuration
  50. Text image parallax effect HTML + CSS + JS
  51. Spring的nohttp宣言:消灭http://
  52. Vue3 intermediate guide - composition API
  53. Analysis of URL
  54. These 10 widgets that every developer must know
  55. Spring's nohttp Manifesto: eliminate http://
  56. Learn more about JS prototypes
  57. Refer to await to JS to write an await error handling
  58. A short article will directly let you understand what the event loop mechanism is
  59. Vue3 uses mitt for component communication
  60. Characteristics and thinking of ES6 symbol