js 等待接口访问成功后执行指定代码【3种方法】（含async await Promise的使用）-阿里云开发者社区

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

2024-07-02 57

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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("搜索数据成功！");
      });
    },

缺点：

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

方案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

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

要点：

使用await 的函数前需加async
await 后需跟一个 Promise 对象（axios请求就是一个Promise 对象），所以范例代码中getList方法必须 return this.$http
若想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);
      });
    },