山东大学软件学院2018级暑期项目实训 第二周 第1次

一、AXIOS异步问题

在进行前端与后端的对接时，我选择采用axios进行数据传递
但是经常会出现一个问题：后台请求到的数据，获取有延时，无法使用
经过仔细尝试和思考发现，axios可以理解为不管怎么样都会是最后执行，不是代码自上而下的，原因是axios是异步而不是同步。
解决方式：
1）因此，如果想不出问题利用请求到的数据，则应该把后续操作都放在axios请求完成后的回调当中
2）但有时，如果把代码逻辑放在回调当中，则会出现一些问题（如无法满足代码逻辑要求），这时候我们想把代码放在回调之外，但由于axios的异步特性，是无法实现的，那么怎么实现同步的请求呢？
利用async / await
async用于声明一个函数是异步的，await用于声明在一个异步函数中等待语句执行完毕。也就是说await只能在async函数中使用。比如：

const fun1 = async function () {
  await axios.get('url)
}

在Vue中使用async / await实现同步请求如下即可：

methods: {
  fun1: async function () {
    await axios.get('url)
  }
}

3）同步请求封装在其他函数中
此时每一个函数都需要做成异步函数，比如如果我想用方法3，那么它所涉及的其他函数也得是异步

methods: {
  fun1: async function () {
    await axios.get('url)
  },
  fun2: async function () {
    ...
    await this.fun1()
    ...
  },
  fun3: async function () {
    ...
    await this.fun2()
    ...
  },
}

总结：因为axios的异步，我们在处理请求时，一定要在then之后，不然可能会出现不可预料的结果。
在经过了axios的系统了解，将前后端所有部分的数据请求逻辑完美完成。