Vue.js中删除接口调用的方法-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46253682/article/details/125061955

本文介绍了在Vue.js应用程序中如何优雅地取消正在运行的API请求，以防止不必要的数据加载和提高用户体验。通过使用axios库的Cancel Token特性，我们可以创建一个可以取消的请求，并在适当的时候执行取消操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-button  size="mini" type="danger" @click="handleDelete(scope.row)" style="margin-top: 5px;">删除</el-button >

import {
		getVocabularyList,
		deleteVocabularyInfo
} from '../../common/api/writing.js'

export default {
		data() {
			return {
				reqDeleteData: { //删除请求数据
						data: {
							id: 0, //词汇id
							userId: 1, //用户
						}
				},
			},
			methods: {
				handleDelete(row) { //删除
				this.reqDeleteData.data.id = row.id
				this.doDelete(row)
				// this.doUpdate()
			},
			doDelete(row) { //执行删除
				const that = this

				this.$confirm('是否确认删除？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteVocabularyInfo(this.reqDeleteData).then(res => {
						if (res.code == 0) { //成功获取
							that.loadData()
							that.$message({
								type: 'success',
								message: '删除成功!'
							});
						}
					})
				})
			},
		
			

			doUpdate() { //更新数据
				const that = this
				console.log('doUpdate',this.reqUpdateData);
				updateVocabularyInfo(this.reqUpdateData).then(res => {
					if (res.code == 0) {
						that.$message({
							type: 'success',
							message: '更新成功'
						});
						that.loadData()
					} else {
						that.$message({
							type: 'error',
							message: res.msg
						});
					}
				})
			},

	
			
}

删除调用接口