zoukankan      html  css  js  c++  java
  • js异步问题,Promise解决回调地狱。

                // 获取省
                getSheng() {
                    return new Promise((resolve, reject) => {
                        axios.get(BASEURL + '/phone/Controllers/', {
                            params: {
                                _action: "1bd2b39b-c393-4dc9-81e3-2ad37076c461",
                            }
                        }).then(res => {
                            console.log(res);
                            resolve(res);
                        }).catch(error => {
                            console.log(error);
                            reject(error);
                        });
                    })
                },
                // 获取市
                getShi(e) {
                    return new Promise((resolve, reject) => {
                        axios.get(BASEURL + '/phone/Controllers/', {
                            params: {
                                _action: "8826c52c-276e-4025-a158-c9333424cb90",
                                txtProvinceID: e//省份ID
                            }
                        }).then(res => {
                            console.log(res);
                            resolve(res);
                        }).catch(error => {
                            console.log(error);
                            reject(error);
                        });
                    })
                },
                // 获取区
                getQu(e) {
                    return new Promise((resolve, reject) => {
                        axios.get(BASEURL + '/phone/Controllers/', {
                            params: {
                                _action: "b88132bd-be02-4be7-bb73-105430b594b1",
                                txtCityID: e//省份ID
                            }
                        }).then(res => {
                            console.log(res);
                            resolve(res);
                        }).catch(error => {
                            console.log(error);
                            reject(error);
                        });
                })

            
                  //调用
            this.getSheng().then(res => {
                    console.log(res);
                    if (res.data.code == 1) {
                        this.$toast(res.data.msg);
                    } else {
                        
                this.option1 = res.data;
                        return this.getShi(res.data[0].value);
                    }
                    // return this.getShi();
                }).then(res => {
                    console.log(res);
                    if (res.data.code == 1) {
                        this.$toast(res.data.msg);
                    } else {
                this.option2 = res.data;
                        return this.getQu(res.data[0].value);
                    }
                    // return this.getQu();
                }).then(res => {
                    console.log(res);
                    if (res.data.code == 1) {
                        this.$toast(res.data.msg);
                    } else {
                       
                        this.option3 = res.data;
                    }
                });
     

    function getUser(call,fail){

      if(true){

        call(1);

      }else{

        fail();

       }

    }

      function getGroup(a,call){
        call(a)
      }

    getUser(function(response){
        getGroup(response.id, function(group){
          getDetails(groupd.id, function(details){
            console.log(details)
          },function(){
            alert('获取分组详情失败')
          })
        }, function(){
          alert('获取分组失败')
        })
      }, function(){
      alert('获取用户信息失败')
    })

     1.  

    真的,Promise 并不能消灭回调地狱,但是它可以使回调变得可控。你对比下面两个写法就知道了。

    getGroup(response.id, success2, error2)
    
    getGroup(response.id).then(success2, error2)

    用 Promise 之前,你不能确定 success2 是第几个参数;

    2.

    小结

    Promise 的优点在于,让回调函数变成了规范的链式写法,程序流程可以看得很清楚。它有一整套接口,可以实现许多强大的功能,比如同时执行多个异步操作,等到它们的状态都改变以后,再执行一个回调函数;再比如,为多个回调函数中抛出的错误,统一指定处理方法等等。

    而且,Promise 还有一个传统写法没有的好处:它的状态一旦改变,无论何时查询,都能得到这个状态。这意味着,无论何时为 Promise 实例添加回调函数,该函数都能正确执行。所以,你不用担心是否错过了某个事件或信号。如果是传统写法,通过监听事件来执行回调函数,一旦错过了事件,再添加回调函数是不会执行的。

    Promise 的缺点是,编写的难度比传统写法高,而且阅读代码也不是一眼可以看懂。你只会看到一堆then,必须自己在then的回调函数里面理清逻辑。

    参考:https://javascript.ruanyifeng.com/advanced/promise.html#toc0

    https://www.cnblogs.com/whybxy/p/7645578.html

  • 相关阅读:
    pkuwc2019自闭记
    一些多项式的整理
    Codeforces 1085G(1086E) Beautiful Matrix $dp$+树状数组
    Codeforces 1083C Max Mex 线段树
    Codeforces 1090J $kmp+hash+$二分
    Codeforces 1073G Yet Another LCP Problem $SA$+单调栈
    Codedforces 1076G Array Game 线段树
    LuoguP5017 摆渡车 $dp$
    NOIP2018游记
    解决python3 安装turtle的问题
  • 原文地址:https://www.cnblogs.com/ygyy/p/13278085.html
Copyright © 2011-2022 走看看