异步执行转化为同步执行的方法

1.为什么要使用await和async

虽然异步操作可以跳过执行，继续执行下一步的操作，但是在很多地方，异步操作给我们带来了一些不便尤其是异步操作没有时序上的严格关系，例如发送请求的时候，很多时候不知道好久回复的相关请求，因此在某些时候，我们还是需要将异步操作修改为同步操作。例如在如下代码中我们就面临这异步的情况

如下代码的情况，我们在f2()中模拟了一个异步操作，但是f3中却要对f2中处理的数据进行判断，但是由于是异步情况，所以没法对在同步函数中处理异步函数发生的相关情况，因此下面这段代码的运行结果始终是   发送请求  登录失败 这种情况，因此这种情况下我们就需要将异步函数转化为同步函数

import { reactive } from 'vue';
export default {
  setup() {
    const ShowData = reactive({
      Number: 0,
      msg: ''      //模拟后端返回的数据
    })
    const f1 = function () {
      console.log('发送请求');
    }
    const f2 = async function () {
      // console.log(123123);
      // return 'hello world!   '
      setTimeout(() => {
        ShowData.msg = '登录成功'
      }, 500)
    }
    const f3 = function () {
      if (ShowData.msg === '') {
        console.log('登录失败');
      } else {
        console.log('登录成功');
      }
    }
    return {
      f1,
      f2,
      f3,
      ShowData
    }
  },
  mounted() {
    this.f1()
    this.f2()
    this.f3()
  }
}

2.定时器的使用-----治标不治本

其实无论是发送请求还是什么情况，如果是需要将异步操作转化为同步的时候，我们其实可以使用一个定时器，例如下面，将f3放在一个定时器中，推迟时间执行，就相当于将f3放入任务队列，就等f2执行完后在执行f3，虽然最后看似完成了需求，f2中修改了在f3中监测到了修改的值，但是其实这种方法是治标不治本，并没有在本质上解决这个问题。

import { reactive } from 'vue';
export default {
  setup() {
    const ShowData = reactive({
      Number: 0,
      msg: ''      //模拟后端返回的数据
    })
    const f1 = function () {
      console.log('发送请求');
    }
    const f2 = async function () {
      // console.log(123123);
      // return 'hello world!   '
      setTimeout(() => {
        ShowData.msg = '登录成功'
      }, 500)
    }
    const f3 = function () {
      if (ShowData.msg === '') {
        console.log('登录失败');
      } else {
        console.log('登录成功');
      }
    }
    return {
      f1,
      f2,
      f3,
      ShowData
    }
  },
  mounted() {
    this.f1()
    this.f2()
    setTimeout(()=>{
      this.f3()
    },1000)
  }
}

3.await和async的使用

其中的async可以将一个函数转化为异步函数，await就相当于等待异步函数执行完后再执行，如下这种情况，我们可以大致实现，等待异步函数执行完后再执行下一个函数。其实就大致的思路就是将待执行的同步函数转化为异步函数，并使用await，等待异步函数执行完后再执行下面。然后就大致可以将异步函数转化为同步函数。具体原理会在后续中继续更新。欢迎大家一起学习

<script>
import { reactive } from 'vue';
export default {
  setup() {
    const ShowData = reactive({
      Number: 0,
      msg: ''      //模拟后端返回的数据
    })
    const f1 = function () {
      console.log('发送请求');
    }
    const f2 = async function () {
      return new Promise(resolve => {
        setTimeout(()=>{
          ShowData.msg = '登录成功'
          resolve('我修改了msg')
        },2000)
      })
    }
    const f3 = async function () {
      console.log(123);
      await this.f2()
      console.log(ShowData.msg);
    }
    return {
      f1,
      f2,
      f3,
      ShowData
    }
  },
  mounted() {
    this.f1()
    this.f3()
  }
}