js 等待接口访问成功后执行指定代码【3种方法】（含async await Promise的使用）

方案1：在.then中执行代码

适用场景：访问接口后，执行的代码固定不变

    getList() {
      this.$http({
        method: "get",
        url: "http://127.0.0.1:4523/mock/430173/user/list",
        params: params,
      }).then((res) => {
        this.dataList = res.data.list;
        // 执行指定代码
        console.log("搜索数据成功！");
      });
    },

缺点：

1. 目标代码嵌套过深
2. 访问接口的代码不便于复用

方案2：通过回调函数执行代码

将目标代码作为函数的参数传入
适用场景：访问接口后，不同触发条件需要执行不同的代码
优点：方便接口代码的封装复用

    // 初始化
    init() {
      let initSucInfo = () => {
        console.log("初始化数据成功！");
      };
      this.getList({}, initSucInfo);
    },
    // 搜索
    search() {
      let params = {
        name: "朝阳",
      };

      let searchSucInfo = () => {
        console.log("搜索数据成功！");
      };
      this.getList(params, searchSucInfo);
    },

    // 函数封装——访问接口成功后，执行传入的callBack函数
    getList(params = {}, callBack) {
      this.$http({
        method: "get",
        url: "http://127.0.0.1:4523/mock/430173/user/list",
        params: params,
      }).then((res) => {
        this.dataList = res.data.list;
        if (callBack) {
          // 执行对应的代码
          callBack();
        }
      });
    },

方案3：使用async await Promise

优点：代码流程清晰，也方便接口代码的封装复用
要点：

1. 使用await 的函数前需加async
2. await 后需跟一个 Promise 对象（axios请求就是一个Promise 对象），所以范例代码中getList方法必须 return this.$http
3. 若想await 返回接口获取的数据，需在接口的.then中

return Promise.resolve(res);

并定义一个变量，接收await 的返回值

let res = await this.getList(params);

目标代码中不使用接口返回的数据

    // 搜索
    async search() {
      let params = {
        name: "朝阳",
      };

      await this.getList(params);
      // 执行目标代码
      console.log("搜索数据成功！");
    },

    getList(params = {}) {
      return this.$http({
        method: "get",
        url: "http://127.0.0.1:4523/mock/430173/user/list",
        params: params,
      }).then((res) => {
        this.dataList = res.data.list;
        console.log("访问接口成功！");
      });
    },

目标代码中使用接口返回的数据

    // 搜索
    async search() {
      let params = {
        name: "朝阳",
      };

      let res = await this.getList(params);
      // 执行目标代码
      console.log("接口返回的数据为：" + res);
    },

    getList(params = {}) {
      return this.$http({
        method: "get",
        url: "http://127.0.0.1:4523/mock/430173/user/list",
        params: params,
      }).then((res) => {
        this.dataList = res.data.list;
        console.log("访问接口成功！");
        return Promise.resolve(res);
      });
    },