new Promise解决回调地狱问题

 只有当有结果后执行resolve(),才会到then()中执行下一步方法
并可以携带参数

new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('四川省')
        resolve('四川省')
      }, 1000);
    }).then(res => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(res + '成都市')
          resolve(res + '成都市')
        }, 1000);
      })
    }).then(res => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(res + '天府广场')
        }, 1000);
      })
    }).catch(err => {
      console.log(err)
    })

参考:ES6---new Promise()讲解(尤其注意里面的参数resolve、reject)_xiubinxu的博客-CSDN博客_new promise reject

得到成功或失败的回调

<template>
  <div>
    <h1>所以的异步数据请求完毕后显示数组数据</h1>
    <h3>接口1异步数据返回:{{ deptName }}</h3>
    <h3>接口2异步数据返回:{{ loginname }}</h3>
  </div>
</template>
<script>
export default dsf.component({
  name: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  ctrlCaption: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  mixins: [$mixins.control],
  components: {},
  data() {
    return {
      deptName: "",
      loginname: "",
    };
  },
  created() {
    this.getAllDate();
  },
  methods: {
    getDate1() {
      let _this = this;
      var p = new Promise(function (resolve, reject) {
        _this.dsf.http
          .get("nc/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", {}, $$webRoot.nc)
          .done(res => {
            res = {
              data: {
                deptName: "管理员",
              success: true,
              state: 20000,
              message: "成功",
            };
            if (res.success) {
              resolve(res.data.deptName);
            } else {
              reject("暂无数据");
            }
          })
          .error(response => {
            _this.dsf.layer.message(response.message || "获取数据异常", false);
          })
          .always(function () {});
      });
      return p;
    },
    getDate2() {
      let _this = this;
      var p = new Promise(function (resolve, reject) {
        _this.dsf.http
          .get("nc/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", {}, $$webRoot.nc)
          .done(res => {
            res = {
              data: {
                loginname: "15977777777",
              },
              success: true,
              state: 20000,
              message: "成功",
            };
            if (res.success) {
              resolve(res.data.loginname);
            } else {
              reject("暂无数据");
            }
          })
          .error(response => {
            _this.dsf.layer.message(response.message || "获取数据异常", false);
          })
          .always(function () {});
      });
      return p;
    },
    getAllDate() {
      let _this = this;
      Promise.all([_this.getDate1(), _this.getDate2()]).then(function (results) {
        console.log("两个异步请求都结束了");
        console.log(results);
        _this.deptName = results[0];
        _this.loginname = results[1];
      });
    },
  },
});
</script>
<style></style>

2022/12/05追加

        请求3个接口,待3个接口的数据全部返回后,得到组合的数据

          var params={}
          var requestsData = [
            '/metadata/macrodata/es/api1',
            '/metadata/macrodata/es/api1',
            '/metadata/macrodata/es/api1',
          ]
          let arr=[]
          var requestArr = requestsData.map(async function (url, i) {
            if (i == 0) {
              params.value= 'b7bccfa8a1d040ae9538fb2ca412c182'
            } else if (i == 1) {
              params.value ='76b0d7e761ec4c4b868619c6768e00e8',
            } else if (i == 2) {
              params.value= 'b7bccfa8a1d040ae9538fb2ca412c182' 
            }
            return _this.$http.get(url, params, true)
          });

          Promise.all(requestArr)
            .then(function (res) {
              var [res1, res2, res3] = res
              
              arr = [{
                  "title": "GDP",
                  "value": res1.data.data.xxx,
                },
                {
                  "title": "固定资产投资 (不含农户) 增速",
                  "value": res2.data.data.xxx,
                },
                {
                  "title": "社会消费品零售总额",
                  "value": res3.data.data.xxx,
                }
              ]
              console.log(arr)

            })
            .error(function (err) {
              console.log("error:", err)
            })
            .always(function () {})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值