Vue中Axios API调用方法未按顺序执行，如何保证其顺序性？

这事儿本质是异步操作的特性搞的鬼——axios.get()发起的HTTP请求是异步的，它不会阻塞后续代码的执行。也就是说，你调用axios.get()之后，浏览器会在后台发请求，同时直接往下跑console.log('Method complete!')，等API响应真的回来时，才会回头执行then里的代码，所以就出现了顺序颠倒的情况。

要让代码按你预期的顺序执行，有两种常用的办法：

方法1：把后续代码移到then回调里 #

既然then里的逻辑是在请求完成后才触发的，那把Method complete!的打印放到then里就行，这样就能保证它在响应处理完成后再执行：

fetch: function() { 
  console.log('Commence call to API!'); 
  axios.get("fetch.php") 
    .then(response => { 
      if (response.status === 204) { 
        this.noContent = true; 
      } else { 
        console.log(response.data); 
      }
      // 把这句移到then内部，确保在请求响应后执行
      console.log('Method complete!'); 
    })
    // 建议加上catch处理请求失败的情况
    .catch(error => {
      console.error('API请求失败:', error);
      console.log('Method complete!'); // 即使失败也可以打印完成提示，按需调整
    }); 
},

方法2：用async/await让异步代码“同步化” #

如果你觉得嵌套的then看起来不够清爽，可以用ES6的async/await语法，让异步代码的写法更接近同步逻辑，可读性更好：

fetch: async function() { 
  console.log('Commence call to API!'); 
  try {
    // 用await等待axios请求完成，拿到响应后再往下走
    const response = await axios.get("fetch.php"); 
    if (response.status === 204) { 
      this.noContent = true; 
    } else { 
      console.log(response.data); 
    }
    // 现在这句会在请求完成后才执行
    console.log('Method complete!'); 
  } catch (error) {
    // 捕获请求过程中可能出现的错误（比如网络问题、服务器报错）
    console.error('API请求出错:', error);
  }
},

注意点 #

• async/await需要把方法标记为async，而且await只能在async函数内部使用。
• 一定要用try/catch包裹await的代码，否则请求失败时会抛出未捕获的错误。

这样调整后，控制台的输出就会严格按照你预期的顺序：Commence call to API! {{Some response data}} Method complete!啦。

内容的提问来源于stack exchange，提问作者chivano