current position:Home>Asynchronous solution async await
Asynchronous solution async await
2021-08-27 08:21:48 【It was a startling sight】
This is my participation 8 The fourth of the yuegengwen challenge 21 God , Check out the activity details :8 Yuegengwen challenge !
Definition
A solution to asynchronous problems with synchronous thinking
-
async Put it in front of the function as a keyword
- Any one of them
async
Functions implicitly return apromise
- Any one of them
-
await
Keywords can only be used inasync
Use... In defined functions- await It can be followed directly by one Promise Instance object
- await Functions cannot be used alone
-
async/await Make asynchronous code look 、 It's more like synchronous code
usage
await Put in Promise Before you call ,await Force the following code to wait , until Promise object resolve, obtain resolve The value of await The result of an expression
await Only in async Function internal use , If it is used in ordinary functions, it will report an error
async function a(){
console.log('a');
var a = await b(); // When await Return non promise
console.log('12');
}
function b(){
console.log('b');
} // return undefined
a();
Copy code
async The role of
async The function returns a Promise If the object is in async Function return A direct measure ,
async I will measure this directly through Promise.resolve() Encapsulated into Promise object ;
If async Function has no return value , It will be returned Promise.resolve(undefined)
await effect
If await It's not a promise object , The operation result of the following expression is the result it waits for
If it's a promise object ,await Will block the following code , etc. promise object resolve
async await How function errors are handled
1. Use try…catch sentence
2. stay await After Promise add to catch Callback
and promise Advantages over
1. Serial synchronous writing , Code reading is relatively easy
2.Async/Await Give Way try/catch You can handle both synchronous and asynchronous errors .
3. When dealing with complex processes , It has advantages in code clarity
// Get the list of columns and platforms
getAllCategory() {
allAppConfig().then((pt) => {
this.allAppList = pt.response
this.ptName = pt.response[0].name
this.ptId = pt.response[0].id
getCopyCategory({ appId: this.ptId }).then((lm) => {
this.getAllCategoryList = lm.response
this.lmName = lm.response[0].categoryName
this.categoryId = lm.response[0].categoryId
this.getArticleList()
})
})
}
Copy code
Change it to :
async getAllCategory() {
let pt = await allAppConfig()
if (pt.code === 200) {
this.allAppList = pt.response
this.ptName = pt.response[0].name
this.ptId = pt.response[0].id
}
let lm = await getCopyCategory({ appId: this.ptId })
if (lm.code === 200) {
this.getAllCategoryList = lm.response
this.lmName = lm.response[0].categoryName
this.categoryId = lm.response[0].categoryId
}
this.getArticleList()
}
Copy code
copyright notice
author[It was a startling sight],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827082145781o.html
The sidebar is recommended
- JS JavaScript how to get the subscript of a value in the array
- BEM - a front-end CSS naming methodology
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Installing Vue devtool for chrome and Firefox
- Front end Engineering - scaffold
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- Front end, netty framework tutorial