This is the 16th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

preface

For a long time no day arch a pawn, because in the usual move brick is solved quite fast, there is no opportunity for in-depth thinking. Today I ran into a problem with promises and async/await in practice. I found that these two pieces of content are still quite weak, and there are still many flaws in application. This article does not make in-depth exploration, but just a record.

Readers, as a story to see.

If the big guy has the interest, temporarily technical itch, willing to guide once, small white very grateful.

scenario

When a page is loaded, a catch is used when a promise request is made, but the subsequent execution is never completely blocked. The immediate reaction in my mind is async/await. Aren’t async and await dealing with synchronization in asynchrony? Yi? Async /await still not working? My day? Uh uh uh uh…

code

Scenario Code 1.0

Add error handling when the user posts a dynamic and deletes it

But loading the comment list, loading the likes, loading the views will still work

The first thought in my head is “I can do this”, just change it to “async/await” and get 2.0

onLoad(options) { this.loadNewsDetail(); This.getreplylist () this.getLikedList() this.addView(this.id)}, methods:{ loadNewsDetail(){ getNewsDetail().then(res=>{ this.detailInfo = res this.isExist = true }).catch(()=>{ This.$api.msg(' dynamic delete ') this. IsExist = false})}}Copy the code

Scenario Code 2.0

I am still not working with async/await. “Await” is the return value of the expression or the result of a promise. The loadNewsDetail function returns no value after execution, so undefined. So there’s 3.0.

async onLoad(options) { await this.loadNewsDetail(); This.getreplylist () this.getLikedList() this.addView(this.id)}, methods:{ loadNewsDetail(){ getNewsDetail().then(res=>{ this.detailInfo = res this.isExist = true }).catch(()=>{ This.$api.msg(' dynamic delete ') this. IsExist = false})}}Copy the code

Scenario code 3.0

Die! Why doesn’t it work? There’s been a mistake. Promise is a promise, and it’s a catch. I finally sensed a problem with the catch method of Promise. If catch does not report an error or returns a Promise in the Rejected state then it will display Resolved. So the problem is here!! So why am I using async/await here? The Promise. Catch MDN portal is now 4.0

async onLoad(options) { this.loadNewsDetail(); This.getreplylist () this.getLikedList() this.addView(this.id)}, methods:{ loadNewsDetail(){ return getNewsDetail().then(res=>{ this.detailInfo = res this.isExist = true }).catch(()=>{ This.$api.msg(' dynamic delete ') this. IsExist = false})}}Copy the code

Scenario code 4.0

Why does throw still not work here. Does executing a throw in a catch not break the code? So why is it still not working here? I suddenly thought of nested try catch execution. Hence 5.0.

onLoad(options) { this.loadNewsDetail(); This.getreplylist () this.getLikedList() this.addView(this.id)}, methods:{ loadNewsDetail(){ return getNewsDetail().then(res=>{ this.detailInfo = res this.isExist = true }).catch(()=>{ This.$api.msg(' isExist ') this. IsExist = false throw 'isExist'})}}Copy the code

Scenario code 5.0

Try catch THE MDN portal

Nested try catch execution has the concept that an inner throw will be caught by an inner try catch, and will not be finally caught by an outer catch until the inner catch throws again. Throw doesn’t have a terminal and the code should be executed in a similar way to a try catch, so there’s no way to interrupt the code just by throwing it. Finally async/await is used. The following two versions are ok. In essence, the throw is captured in the outer layer of async await and execution is interrupted.

async onLoad(options) { await this.loadNewsDetail(); This.getreplylist () this.getLikedList() this.addView(this.id)}, methods:{ loadNewsDetail(){ return getNewsDetail().then(res=>{ this.detailInfo = res this.isExist = true }).catch(()=>{ IsExist = false throw 'isExist'})}} async onLoad(options) {await this.loadnewsdetail (); This.getreplylist () this.getLikedList() this.addView(this.id)}, methods:{ async loadNewsDetail(){ try{ let res = await getNewsDetail() this.detailInfo = res this.isExist = true }catch(err){this.$api. MSG (' static ') this.isExist = false throw 'static'}}}Copy the code

summary

With such a small example, I have deepened my understanding of throw, try catch, promise, and async await.

Sometimes when you encounter a problem, you should not think that you have not mastered a big block of knowledge well. Instead, you should think whether this block of knowledge is related to other blocks of knowledge. You have not encountered such a complicated situation of mixing. Trust yourself to know the individual points. Pick your way through the layers and find the ultimate problem rather than trying to muddle through.

In fact, the main problems here are in try catch and throw. Other promises and async/await are only supporting roles. At the beginning, they find the wrong direction of the problem and always suspect that they have not grasped promise and async/await well. Still want to seek truth from facts, do not belittle themselves excessively, also do not be overly arrogant.

However, promise and async/await have indeed not been realized by handwriting, so whenever there is a problem, I will feel like a piece of suspicious heart, always think that it is not well mastered, which is also the reflection of my usual study is not diligent, I still have to seize the time. Otherwise you are always so paranoid and inefficient. Find time to solve the following problems.

Don’t ignore problems, look at them, think about how to solve them, refer to other people’s solutions, and compare them repeatedly according to your own needs. Technical problems should be solved with technical methods, not due to their impetuous and demanding progress. Avoid today’s pain, tomorrow’s pain.

Well, keep up the good work.