关于 $apply () 的疑问

关于 data 中 errorMessage 的这段代码:

if  (!this.username ||  !this.password) 
    { this.errorMessage =  '请填写账户名和密码'
    return
    }

和之后的这段:

  if (authResponse.statusCode === 401) {
    this.error = true
    this.errorMessage = authResponse.data.message
    this.$apply()
  }

我的疑问是,教程里有说过对于异步调用时,要更新 data 中某个数据时必须调用一次 this.$apply(),那第一段修改的errorMessage 为啥没用$apply().

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 1
liyu001989
async submit() {
        // 提交时重置错误
        this.error = false
        this.errorMessage = ''

        if (!this.username || !this.password) {
          this.errorMessage = '请填写账户名和密码'
          return
        }

        // 获取用户名和密码
        let params = {
          username: this.username,
          password: this.password
        }

        try {
          let authResponse = await api.login(params)

          // 请求结果为 401 说明用户名和密码错误,显示错误提示
          if (authResponse.statusCode === 401) {
            this.error = true
            this.errorMessage = authResponse.data.message
            this.$apply()
          }

          // 201 为登录正确,返回上一页
          if (authResponse.statusCode === 201) {
            wepy.navigateBack()
          }
        } catch (err) {
          wepy.showModal({
            title: '提示',
            content: '服务器错误,请联系管理员'
          })
        }
      }
    }

看一下完成的代码,submit 方法中因为有了 await 异步调用,所以前面需要增加 async。

上面这个判断参数的代码是同步执行的,不需要增加 $apply(). ,而执行到,才开始异步调用 await api.login(params),后面的代码中如果要修改某个属性,需要使用 $apply()

6年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!