This is the sixth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

What is a promise?

1, mainly used for asynchronous computing

2. Asynchronous operations can be queued and executed in the desired order to return expected results

3. Promise can be passed and manipulated between objects to help us deal with queues

Why are there promises?

To avoid interface freezing (quests)

Sync: Suppose you go to a restaurant, find a position, call the waiter, this time the waiter said to you, sorry, I am “sync” waiter, I have to serve this table before you. The guests at the table have clearly eaten, you just want a menu, such a small action, but the waiter wants you to wait until someone else’s a big action is completed, then to greet you, this is the problem of synchronization: that is, “the order of delivery of work 1234, must be completed in accordance with the order of 1234”. Asynchronous: it is to continue to do the work delivered by B after the work that takes A long time to be delivered by A is handed over to the system. Wait until the system completes the previous work, and then continue to do the rest of A’s work through callback or event. The order in which AB’s work is completed is independent of the order in which they were delivered, hence the term “asynchronous”.

1. Promise

Function2 (){// your logic code return promise.resolve (/* here is the data to return */)} function3(){// your logic code return promise.resolve (/*) } // Call function1(){this.function2().then(val => {this.function3(); }); }Copy the code

2. I promise

init1(){ return new Promise((resolve, reject) => { let data={ dateStr:this.time }; API. Get (" url ", null). Then (res = > {/ / own operating resolve ()}). The catch (err = > {reject ()}); }); }; init2(){ return new Promise((resolve, reject) => { let data={ dateStr:this.time }; API. Get (" url ", null). Then (res = > {/ / own operating resolve ()}). The catch (err = > {reject ()}); }); }; // Call promise.all ([this.init1(),this.init2()]).then(() => {// The operation to be executed after both of them are executed // the loading problem}).catch(err => {// throw an error message });Copy the code

Add, delete, and check the logic implementation

src/views/test/MyTestCaseList.vue

methods: {handleAdd () {this.modalinfo.title = 'add' this.mdl = null this.visible = true}, HandleEdit (record) {this.modalinfo.title = 'modify' this.visible = true this.mdl = {... record } }, handleOk () { const form = this.$refs.createModal.form this.confirmLoading = true form.validateFields((errors, values) => { if (! Errors) {console.log('values', values) if (values. Id > 0) {return new Promise((resolve,)) reject) => { updateItem(values).then(response => { if (response.status === 200) { this.visible = false This.confirmloading = false // resets form.resetFields() // refresh the table API reference https://www.antdv.com/components/table-cn/#API this $refs. Table. The refresh () this. $message. Success (' success ')} else {/ / Message (alter) reference https://www.antdv.com/components/alert-cn/#API this. $message. Error (' change failed, please try again later! ')} resolve(response)}).catch(error => {reject(error)})} else {// Add return new Promise((resolve, reject)}) reject) => { addItem(values).then(response => { if (response.status === 200) { this.visible = false this.confirmLoading $refs.table.refresh() this.$message.success(' new successfully ')} else { This.$message.error(' failed to add new, please try again later! ') } resolve() }).catch(error => { reject(error) }) resolve() }) } } else { this.confirmLoading = false } }) }, HandleCancel () {this.visible = false const form = this.refs.createmodal.form form.resetFields()}, HandleDelete (row) {// Get the external object, $refs.table const MSG = this.$message console.info('table===>', Table) this.$confirm({title: 'warning ', content:' Do you want to delete ${row.id}? ', okText: 'delete ', okType: 'danger', cancelText:' delete ', okType: 'danger', cancelText: 'Cancel ', onOk () {console.log('OK') return new Promise((resolve, Reject) => {deleteItem(row).then((res) => {console.info('deleteItem res ===> ', Res) if (res.status === 200) {MSG. Success (' delete successfully ') table.refresh()} else {MSG. Error (' delete failed, please try again later! ')}}). The catch (() = > {/ / exception into the body to the console. This method the log (' Oops errors! ') }) resolve() }) }, onCancel () { console.log('Cancel') } }) }, handleSub (record) { // if (record.status ! = = 0) {/ / this. $message. The info (` ${record. No} subscribing `) / /} else {/ / this. $message. Error (` ${record. No} subscription failed, Rule closed ') //}}, onSelectChange (selectedRowKeys, selectedRows) { this.selectedRowKeys = selectedRowKeys this.selectedRows = selectedRows }, toggleAdvanced () { // this.advanced = ! this.advanced }, resetSearchForm () { // this.queryParam = { // date: moment(new Date()) // } } }Copy the code