Is there a better solution than async using JavaScript?
This article mainly tells you about better solutions for JavaScript experience asynchronousness. Friends who need this aspect can follow it for reference.
1. The evolution history of asynchronous solutions
JavaScript’s asynchronous operation has always been a troublesome problem, so people continue to propose various solutions to it. It can be traced back to the earliest callback function (an old friend of ajax), to Promise (not a new friend), and then to the ES6 Generator (a powerful friend).
We may have used a relatively famous Async.js a few years ago, but it did not get rid of the callback function, and error handling also followed the convention of "the first parameter of the callback function is used to pass the error". The well-known callback hell was still a prominent problem until Generator changed this asynchronous style.
But with the emergence of ES7's async await (Bunker's new friend), we can easily write synchronous style code while having an asynchronous mechanism. It can be said to be the simplest, most elegant, and best solution at present.
2. async await syntax
async await syntax is relatively simple and can be considered as syntactic sugar for Generator. It is more semantic than asterisk and yield. The following is a simple example that outputs hello world after 1 second:
function timeout(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value)
}
asyncPrint('hello world', 1000);await can only be used in async functions. If used in ordinary functions, an error will be reported.
await is followed by a Promise Object (of course other values are also possible, but it will be packaged into an immediately resolved Promise, which is meaningless)
await will wait for the result of the Promise to return before continuing execution
await is waiting. It is a Promise object, but you don’t need to write .then(). You can get the return value directly. After fine-tuning the above code, you find that the return value result can also output hello world:
function timeout(ms) {
return new Promise((resolve) => {
setTimeout(_ => {resolve('hello world')}, ms);
});
}
async function asyncPrint(ms) {
let result = await timeout(ms);
console.log(result)
}
asyncPrint(1000);3. async await error handling
As mentioned earlier, although await is waiting for a Promise object, there is no need to write .then(), so in fact there is no need to write .catch(). You can catch errors directly with try catch, which can avoid very redundant error handling code. Yu He is cumbersome, so let’s fine-tune the above example:
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(_ => {reject('error')}, ms);//reject模拟出错，返回error
});
}
async function asyncPrint(ms) {
try {
console.log('start');
await timeout(ms);//这里返回了错误
console.log('end');//所以这句代码不会被执行了
} catch(err) {
console.log(err); //这里捕捉到错误error
}
}
asyncPrint(1000);If there are multiple awaits, they can be put together in try catch:
async function main() {
try {
const async1 = await firstAsync();
const async2 = await secondAsync();
const async3 = await thirdAsync();
}
catch (err) {
console.error(err);
}
}4. Async await points to note
1). As mentioned before, the Promise object behind the await command is likely to result in rejection or a logical error, so it is best to put await in the try catch code block.
2). For asynchronous operations of multiple await commands, if there is no dependency, let them trigger at the same time.
const async1 = await firstAsync(); const async2 = await secondAsync();
In the above code, if async1 and async2 are two independent asynchronous operations, writing this way will be more time-consuming, because secondAsync will only be executed after firstAsync is completed, which can be handled elegantly with Promise.all :
let [async1, async2] = await Promise.all([firstAsync(), secondAsync()]);
3). await can only be used in async functions. If used in ordinary functions, an error will be reported:
async function main() {
let docs = [{}, {}, {}];
//报错 await is only valid in async function
docs.forEach(function (doc) {
await post(doc);
console.log('main');
});
}
function post(){
return new Promise((resolve) => {
setTimeout(resolve, 1000);
});
}Just add async to the forEach internal method:
async function main() {
let docs = [{}, {}, {}];
docs.forEach(async function (doc) {
await post(doc);
console.log('main');
});
}
function post(){
return new Promise((resolve) => {
setTimeout(resolve, 1000);
});
}But you will find that the three mains are output at the same time, which means that the post is executed concurrently, not sequentially. Changing to for can solve the problem. The three mains are output one second apart:
async function main() {
let docs = [{}, {}, {}];
for (let doc of docs) {
await post(doc);
console.log('main');
}
}
function post(){
return new Promise((resolve) => {
setTimeout(resolve, 1000);
});
}In short, after using async await, I feel refreshed. I can use very concise and elegant code to implement various fancy asynchronous operations, and I don’t have to fall into callback hell when the business logic is complex. middle. I dare not say that this must be the ultimate solution, but it is indeed the most elegant solution currently!
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to integrate zTree code in Angular
node packaging tool Pkg (detailed tutorial)
How to use js to invoke App in WeChat?
The above is the detailed content of Is there a better solution than async using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
How to use JavaScript and WebSocket to implement a real-time online ordering system
Dec 17, 2023 pm 12:09 PM
Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order
How to implement an online reservation system using WebSocket and JavaScript
Dec 17, 2023 am 09:39 AM
How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
Advanced Guide to Python asyncio: From Beginner to Expert
Mar 04, 2024 am 09:43 AM
Concurrent and Asynchronous Programming Concurrent programming deals with multiple tasks executing simultaneously, asynchronous programming is a type of concurrent programming in which tasks do not block threads. asyncio is a library for asynchronous programming in python, which allows programs to perform I/O operations without blocking the main thread. Event loop The core of asyncio is the event loop, which monitors I/O events and schedules corresponding tasks. When a coroutine is ready, the event loop executes it until it waits for I/O operations. It then pauses the coroutine and continues executing other coroutines. Coroutines Coroutines are functions that can pause and resume execution. The asyncdef keyword is used to create coroutines. The coroutine uses the await keyword to wait for the I/O operation to complete. The following basics of asyncio
JavaScript and WebSocket: Building an efficient real-time image processing system
Dec 17, 2023 am 08:41 AM
JavaScript is a programming language widely used in web development, while WebSocket is a network protocol used for real-time communication. Combining the powerful functions of the two, we can create an efficient real-time image processing system. This article will introduce how to implement this system using JavaScript and WebSocket, and provide specific code examples. First, we need to clarify the requirements and goals of the real-time image processing system. Suppose we have a camera device that can collect real-time image data
