async/await in JS
This time I will bring you async/await in JS. What are the precautions when using async/await in JS. Here are practical cases, let’s take a look.
Asynchronous operations in JS have evolved from the initial callback function to Promise, and then to Generator, which are all gradual improvements. The emergence of async functions seems to see the end of the asynchronous solution. Use Write asynchronously in a synchronous way.
A brief explanation of the async function is the syntactic sugar of the Generator function.
How to write the Generator function
let promise = function (val){ return new Promise(function (resolve, reject){
setTimeout(()=>{ console.log(val);
resolve(val);
},1000);
});
};let gen = function* (){ let p1 = yield promise('1'); let p2 = yield promise('2');
};let genF = gen();How to write the async function
let promise = function (val){ return new Promise(function (resolve, reject){
setTimeout(()=>{ console.log(val);
resolve(val);
},1000);
});
};let gen = async function (){ let p1 = await promise('1'); let p2 = await promise('2');
};The async function is an improvement on the Generator function. In the syntax, the asterisk of the Generator function is replaced by async, yield Replaced with await.
And async is also different from the Generator function:
It comes with a built-in executor, the Generator function needs to rely on the executor, and async can be the same as an ordinary function, only one line is needed
relative to the Generator function , async and await semantics are clearer
Strong applicability, yield can only be Thunk functions and Promise objects, and await can be Promise objects and primitive type values (numeric values, Strings, Boolean, etc.)
async function
The expectation placed on the async function is to help us solve asynchronous operation problems, so we need to understand the return value of the async function What is it.
async function asyncAwait() { return 'async await';
}let a = asyncAwait();console.log(a);Result output:
Promise {<resolved>: "async await"}It can be seen that the async function returns a Promise object. If a direct value is returned in the function, the async function will be encapsulated into a Promise object and returned, and if there is no return value, the async function will return undefined
Promise {<resolved>: undefined}When await is not combined, the async function will be executed immediately and return a Promise object.
await waiting
await is a operator, and the result of waiting is a Promise object or other value, such as:
function func1() { return 'async';
}async function func2() { return Promise.resolve('await');
}async function asyncAwait() { let f1 = await func1(); let f2 = await func2(); console.log(f1, f2);
}
asyncAwait()Result output:
async await
awaitThe operation of expression depends on the result of waiting. If what it waits for is not a Promise object, the result of the operation is what it waits for,
If it waits for a Promise object, it will block the following code, wait for the Promise object to resolve, and then get the resolved value as the result of the expression.
Async function calls will be encapsulated in Promise, which is why await needs to be used in async functions.
async/await chain processing
For multiple asynchronous operations, Promise's then can solve the problem of multi-layer callbacks.
function ajax(t) { return new Promise(resolve => {
setTimeout(() => resolve(t + 200), t);
});
}function step1(t) { console.log(`step1 in ${t}ms`); return ajax(t);
}function step2(t) { console.log(`step2 in ${t}ms`); return ajax(t);
}function step3(t) { console.log(`step3 in ${t}ms`); return ajax(t);
}function submit(){ console.time('submit');
step1(200)
.then(time2 => step2(time2))
.then(time3 => step3(time3))
.then(result => { console.log(`result is ${result}ms`); console.timeEnd("submit");
});
}submit();
async function implementation:
function ajax(t) { return new Promise(resolve => {
setTimeout(() => resolve(t + 200), t);
});
}function step1(t) { console.log(`step1 in ${t}ms`); return ajax(t);
}function step2(t) { console.log(`step2 in ${t}ms`); return ajax(t);
}function step3(t) { console.log(`step3 in ${t}ms`); return ajax(t);
}async function submit(){ console.time('submit'); const t1 = 200; const t2 = await step1(t1); const t3 = await step2(t2); const result = await step3(t3); console.log(`result is ${result}`); console.timeEnd('submit');
}
submit();Result output:
step1 in 200ms step2 in 400ms step3 in 600ms result is 800submit: 1209.85107421875ms
And if the requirements change, the parameters of each step After all are the results of the previous steps, the async function can be written as:
function ajax(t) { return new Promise(resolve => {
setTimeout(() => resolve(t + 200), t);
});
}function step1(t1) { console.log(`step1 in ${t1}ms`); return ajax(t1);
}function step2(t1, t2) { console.log(`step2 in ${t1}ms,${t2}ms`); return ajax(t1 + t2);
}function step3(t1, t2, t3) { console.log(`step3 in ${t1}ms,${t2}ms,${t3}ms`); return ajax(t1 + t2 + t3);
}async function submit(){ console.time('submit'); const t1 = 200; const t2 = await step1(t1); const t3 = await step2(t1, t2); const result = await step3(t1, t2, t3); console.log(`result is ${result}`); console.timeEnd('submit');
}
submit();Result output:
step1 in 200ms step2 in 200ms,400ms step3 in 200ms,400ms,800ms result is 1600submit: 2210.47998046875ms
async/await Notes
async can be used to declare the content of the package inside Executed in a synchronous manner, await controls the execution sequence. Each await is executed, blocking code execution, waiting for the await return value, and then executing the subsequent await.
The function called after await needs to return a promise.
await can only be used in async functions. If used in ordinary functions, an error will be reported.
The Promise object behind the await command may result in rejected, so it is best to place the await command in the try...catch code block.
async/await try/catch writing method
async function asyncAwait() { try { await promise();
} catch (err) { console.log(err);
}
}// 另一种写法async function asyncAwait() { await promise().catch(function (err){ console.log(err);
});
}I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
Detailed explanation of Mixins.js usage in React.js
The above is the detailed content of async/await in JS. 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
How to use insertBefore in javascript
Nov 24, 2023 am 11:56 AM
Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).
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
