Object.assign 的问题
object assign 问题
2023-09-11 14:17:02 时间
功能及问题
如下代码,
使用用户最后一次配置信息的同时,当用户关闭数据记录时提示用户确定关闭。
export default {
name: 'editPage',
data() {
return {
page: {},
fpSettings: {},
settingApiOk: false,
}
},
watch: {
fpSettings: {
handler(newVal) {
let pageSettings = this.page.settings || {}
if(this.settingApiOk && newVal.trace === false && pageSettings.trace === true) {
this.$dialog.confirm({
message: '确定关闭吗?',
cancelButtonText: '暂不',
confirmButtonText: '确定',
}).then(() => {
console.log('确定')
}).catch(() => {
console.log('暂不')
newVal.trace = true
})
}
this.page.settings = {...pageSettings, ...newVal}
},
deep: true,
},
},
mounted() {
http.get(`fppage/lastSetting`).then(({ settings: lastSettings } = {}) => {
http.get(`fppage/setting`).then((settings = {}) => {
this.fpSettings = Object.assign(this.fpSettings, lastSettings, settings.settings)
this.settingApiOk = true
})
})
}
}
现在有一个 bug , 在手机上, 如果选项为关闭, 刷新时会直接弹出提示窗口, 正确情况是只应该在用户设置的时候弹出。在电脑上把网速调为 Fast 3G
以下会重现。
经测试, 如果不使用 fppage/lastSetting
这个请求直接是正常的。
但 setting
是写在 lastSetting
的回调 then
中的, 应该他两不存在干扰问题呀。
但还是猜想有没有可能虽然写了 then
,他们依然可能同时发出请求, 同时接收到数据。
并且使用了一个 settingApiOk
变量来判断接口是否请求完成, 然而问题依旧。
改为同步方式
试图使用 async / await
异步转为同步的方法, 把 mounted
中的代码抽取 methods
中。
貌似与之前的代码也没什么不同。确实, 问题依旧。
逐步 debugger
, 确定是一个接口一个接口的请求完, 代码一行一行的走的哇。
async intSetting () {
const lastSettings = await this.$http.get(`fppage/lastSetting`)
const setting = await this.$http.get(`fppage/setting`)
this.fpSettings = Object.assign(this.fpSettings, lastSettings, setting.settings)
this.settingApiOk = true
},
干脆再加个 await 吧
看上面的代码都在前面加了 await
也都没有用, 那索性再在 Object.assign()
前面加一个试试吧。
尼玛居然成功了, 完全想不到是这个原因。 难道 Object.assign
是一个异步方法吗?傻傻分不清。
换个 … 试试
Object.assign()
和 ...
都是对象合并的方法。那换个 ...
试试呢?
// this.fpSettings = await Object.assign(this.fpSettings, lastSettings, setting.settings)
this.fpSettings = await {...this.fpSettings, ...lastSettings, ...setting.settings}
很遗憾, 使用 ...
方式加 await 也不能解决问题。那么看来它和 Object.assign()
还是有区别的。那么区别是什么呢?
疑问
通过上面的情况, 有几个问题存在。
Object.assign()
是一个异步操作吗?为什么加await
就好了?Object.assign()
和...
有什么不同?
相关文章
- Passing address of non-local object to __autoreleasing parameter for write-back
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
- Laravel 避免 Trying to get property of non-object 错误
- Object [object Object] has no method 'live'
- Object.assign()
- Android中关于在onDrow或者onMeasure中创建对象提示Avoid object allocations during draw/layout operations (preallocate and reuse instead) 问题
- Object.assign()的使用
- js中Object.defineProperty()和defineProperties()
- 泡泡一分钟:Cooperative Object Transportation by Multiple Ground and Aerial Vehicles: Modeling and Planning
- DOM= Document Object Model,文档对象模型---以对象管理组织(OMG)的规约为基础的
- Object comparison - (BOOL)isEqual:(id)other
- 【ES9(2018)】Object Rest & Spread
- 浅析Object.assign()基本用法(对象合并、同名属性覆盖、仅1个参数时直接返回、target不是对象会转成对象、源对象位置为非对象时不同的处理规则-字符串的特殊情况、拷贝的属性限制)及需要注意的点(浅拷贝、同名属性替换、数组的处理-把索引当属性替换、取值函数先取值再拷贝)和常见应用(给对象添加属性、合并多个对象、给属性设置默认值)
- C# json object互转工具
- FastJson jsonString 转 Object
- 《RefineDet:Single-Shot Refinement Neural Network for Object Detection》论文笔记
- 目标检测调优技巧:《Bag of Freebies for Training Object Detection Neural Networks》论文笔记