Object.assign 的问题

功能及问题

如下代码，

使用用户最后一次配置信息的同时，当用户关闭数据记录时提示用户确定关闭。

  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() 还是有区别的。那么区别是什么呢？

疑问

通过上面的情况， 有几个问题存在。

1. Object.assign() 是一个异步操作吗？为什么加 await 就好了？
2. Object.assign() 和 ... 有什么不同？

​