同步和异步的问题----体现在实际开发

1.login页面的代码

<template>
  <div class="login">
    <div class="box">
      <el-form ref="ref" :model="form" :rules="rules">
        <el-form-item>
          <div style="text-align: center">
            <img src="../../assets/common/login-logo.png" alt="" />
          </div>
        </el-form-item>
        <el-form-item prop="mobile">
          <el-input
            v-model="form.mobile"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            prefix-icon="el-icon-lock"
            type="password"
            @keyup.enter.native="submit"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" @click="submit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { sysLogin } from "../../api/user";
// import Cookiejs from "js-cookie";
export default {
  data() {
    return {
      form: {
        mobile: "13800000002", //手机号
        password: "123456", //密码
      },
      rules: {
        mobile: [
          { required: true, message: "必填", trigger: "change" },
          //   手机号的正则验证
          {
            validator: (rule, value, callback) => {
              const reg =
                /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
              if (reg.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的手机号"));
              }
            },
            trigger: "change",
          },
        ],
        password: [
          { required: true, message: "必填", trigger: "change" },
          {
            min: 6,
            max: 12,
            message: "请输入6-12位的密码",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    submit() {
      this.$refs.ref.validate(async (result) => {
        if (result) {
         //  const res = await sysLogin(this.form);
         //  Cookiejs.set("hr67", res.data);
         //  this.$message.success("验证成功");
         await this.$store.dispatch('user/toLogin',this.form)
         const _redirect=this.$route.query.redirect || '/'
        //  有就跳到回跳页面,
        //  没有直接跳到首页

         this.$router.push(_redirect)
        }
      });
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
//  scoped 看得到的就可以管,子组件最外层可以看到
// @代表
.login {
  height: 100%;
  background: url("../../assets/common/login.jpg") no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 550px;
    .el-button {
      background-color: #407ffe;
    }
  }
}
</style>

2.user模快下的代码

const actions = {
  async toLogin(store,form){
    const res=await sysLogin(form)
    Message.success('登录成功')
    store.commit('setToken',res.data)  
  },

 3.调用不加入await

   submit() {
      this.$refs.ref.validate(async (result) => {
        if (result) {
          //  const res = await sysLogin(this.form);
          //  Cookiejs.set("hr67", res.data);
          //  this.$message.success("验证成功");
          this.$store.dispatch("user/toLogin", this.form);
          console.log(1);
          const _redirect = this.$route.query.redirect || "/";
          //  有就跳到回跳页面,
          //  没有直接跳到首页

          this.$router.push(_redirect);
        }
      });
    },

 async toLogin(store,form){
    console.log(2);
    const res=await sysLogin(form)
    Message.success('登录成功')
    store.commit('setToken',res.data)
  
  
  },

 打印的结果：

另外一种情况:

    submit() {
      this.$refs.ref.validate(async (result) => {
        if (result) {
          //  const res = await sysLogin(this.form);
          //  Cookiejs.set("hr67", res.data);
          //  this.$message.success("验证成功");
          this.$store.dispatch("user/toLogin", this.form);
          console.log(1);
          const _redirect = this.$route.query.redirect || "/";
          //  有就跳到回跳页面,
          //  没有直接跳到首页

          this.$router.push(_redirect);
        }
      });
    },

 async toLogin(store,form){
    
    const res=await sysLogin(form)
    Message.success('登录成功')
    store.commit('setToken',res.data)
    console.log(2);
  
  },

打印的结果：

这两种打印的结果完全是不一样的结果,反映了一种什么情况呢？

个人的理解:

众所周之,js是一个单线程的语言,第一种执行的结果：

 触发到了toLogin方法后,先去打印2 后面sysLogin的调用是异步的, 所以执行1。

解决问题的方法

在调用方法前加入await

      await  this.$store.dispatch("user/toLogin", this.form);

打印的结果:

 这显然也是我们想要的,等方法调用完后,完成跳转。

总结:

在公用的模块下调用方法,为了防止先后顺序变乱,可以加入await来调整方法的先后执行。

await在修饰同步的时候,里面的异步代码会被包裹。