在 vue 文件中如 把每一次请求对象存在 data 中 就会引发此BUG,特别是vue3 的uni-app 项目 因为 vue3 的响应是用了 ES6的 Proxy，此时 我们想取出对应的重复请求，拿到对应的请求为 Proxy 当要阻断请求时调用abort() 方法就会报错，解决报错也非常简单，把请求返回 不存在data中就能够解决此问题，此问题在编译成微信小程序必然会出现
常见不会出现此问题 （一般都会封装请求，从而绕开了此问题）
<template>
<view class="content">
<button @click="sendhttp('http://192.168.88.65:3339/integralRecord/DelIntegralRecord',{type:2})">
发送HTTP</button>
<button @click="sendhttp('http://192.168.88.65:3339/integralRecord/DelIntegralRecord',{type:1})">
发送HTTP</button>
<button @click="sendhttp('http://192.168.88.65:3339/integralRecord/DelIntegralRecord1',{type:1})">
发送HTTP2</button>
</view>
</template>
<script>
export default {
data() {
return {
httpurl: []
}
},
methods: {
sendhttp(url, data = {}) {
const is = this.httpurl.find(u => u.url === url && u.data === JSON.stringify(data))
const indexId = this.httpurl.findIndex(u => u.url === url && u.data === JSON.stringify(data))
if (is) {
//#ifdef H5
is.requestTask.abort();
//#endif
//#ifdef MP-WEIXIN
is.requestTask
//#endif
}
const requestTask = uni.request({
url,
data,
complete() {
console.log('响应了');
}
})
this.httpurl.push({
url,
data: JSON.stringify(data),
requestTask
})
}
}
}
</script>
修改后
<template>
<view class="content">
<button @click="sendhttp('http://192.168.88.65:3339/integralRecord/DelIntegralRecord',{type:2})">
发送HTTP</button>
<button @click="sendhttp('http://192.168.88.65:3339/integralRecord/DelIntegralRecord',{type:1})">
发送HTTP</button>
<button @click="sendhttp('http://192.168.88.65:3339/integralRecord/DelIntegralRecord1',{type:1})">
发送HTTP2</button>
</view>
</template>
<script>
const httpurl = {}
export default {
data() {
return {
title: 'Hello',
}
},
methods: {
sendhttp(url, data = {}) {
for (let s in httpurl) {
// console.log(this.httpurl[s].url);
if (httpurl[s].url === url) {
httpurl[s].requestTask.abort()
delete httpurl[s]
}
}
const requestTask = uni.request({
url,
data,
complete() {
console.log('响应了');
}
})
const uniqueId = requestTask.uniqueId || new Date().getTime()
httpurl[uniqueId] = {
requestTask,
url,
data: JSON.stringify(data)
}
}
}
}
</script>
