【获取接口数据】vue调用接口函数获取数据的各类写法（同步异步写法，如何判断异步函数）

前言

• 如果你调用接口，接口成功200，但是没返回数据，反而会有Promise 字样，证明这是一个异步函数，请使用async/await或者.then() /catch去请求他

一、调用前提

• 1. 已在vue文件里导入接口，本篇文章用getAllData作为接口函数举例

 - import getAllData from "@/views/mydata.js";

• 2. js文件里，此接口的http请求正确
     参考这篇帖子的写法：前端常见HTTP请求写法
• 3. 在vue文件里的定义请求方法getData，可以在created里或mounted里写（或者在自定义的其他位置）

  mounted() {
    this.getData()
  },

二、vue文件调用接口函数

1、使用 async/await（在异步函数中）

async getData() {
  try {
    const response = await getAllData();
    // 在这里处理 response
  } catch (error) {
    // 在这里处理错误
  }
}

2、使用 .then() /catch方法（在全局或另一个函数中）

 getData() {
      getAllData().then((response) => {
          // 在这里处理 response
        }).catch((error) => {
          // 在这里处理错误
        });
    }

3、使用回调函数（如果getAllData支持回调）

    getData() {
      getAllData((error, response) => {
        if (error) {
          // 在这里处理错误
        } else {
          // 在这里处理 response
        }
      });
    },

4、链式调用（调用多个接口）

    getData() {
      getAllData1().then(data1 => {
        // 处理数据
        return getAllData2(data1);
      }).then(data2 => {
        // 处理处理后的数据
      }).catch(error => {
        // 处理任何步骤中的错误
      });
    },

5、简洁写法（只能当接口为同步函数且返回一个值时使用）

    getData() {
      const response = getAllData();
    },

6、总结

• 如果 getAllData是一个返回 Promise 的异步函数，那么你必须在异步函数中或者通过 .then() 方法来处理它。
• 使用 const response = getAllData(); 这样的写法，只有在 getAllData是同步函数且返回一个值时才是正确的。但通常，接口调用都是异步的，因此需要用上面提到的其他方法来处理。

三、接口请求

1、接口请求详解

• 指前端通过HTTP协议向服务器请求数据的过程。在Vue.js中，这些请求通常是异步的，但也有同步请求的情况。

• （1）. 异步请求
  异步请求不会阻塞代码的执行，允许用户界面保持响应，同时后台处理数据加载。这是Vue.js中推荐的处理方式。

• （2）. 同步请求
  同步请求会阻塞代码的执行，直到服务器响应。这种请求在浏览器环境中不常见，因为它会导致用户界面冻结。

2、判断一个接口函数是否异步

• 随便用以上代码调用接口后，使用控制台或调试工具来检查函数的返回值，如果它明确返回一个 Promise 对象，那么它就是异步的。

3、Promise

• Promise 是 JavaScript 中用于表示异步操作最终完成或失败的对象。它是一个对象，它提供了链式处理的能力，并且能够更好地管理异步操作。
• Promise 状态
  待定（Pending）: 初始状态，既不是成功，也不是失败状态。
  已兑现（Fulfilled）: 意味着操作成功完成。
  已拒绝（Rejected）: 意味着操作失败。
• Promise 的生命周期: 1.待定 -> 2. 已兑现（Fulfilled） 或 3. 已拒绝（Rejected）