Promise解决异步深层嵌套问题

最新推荐文章于 2023-12-01 13:27:34 发布

peak_chan

最新推荐文章于 2023-12-01 13:27:34 发布

阅读量1.4k

点赞数 4

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_49455560/article/details/110204801

版权

本文介绍使用Promise解决JavaScript中异步操作的深层嵌套问题。通过.then(), .catch(), .finally()等方法来优雅地处理异步流程，并介绍了Promise.all()及Promise.race()的用法。

摘要由CSDN通过智能技术生成

Promise解决异步深层嵌套问题

Promise基本API
.then()得到异步任务正确的结果

var p = new Promise(function(resolve, reject){
      // 这里用于实现异步任务
      setTimeout(function(){
        var flag = false;
        if(flag) {
          // 正常情况
          resolve('hello');
        }else{
          // 异常情况
          reject('出错了');
        }
      }, 100);
    });
    p.then(function(data){
      console.log(data)
    },function(info){
      console.log(info)
    });

.catch()获得异步任务错误的结果
.finally()成功与否都会执行(不是正式标准)

function foo() {
      return new Promise(function(resolve, reject){
        setTimeout(function(){
          // resolve(123);
          reject('error');
        }, 100);
      })
    }
    // foo()
    //   .then(function(data){
    //     console.log(data)
    //   })
    //   .catch(function(data){
    //     console.log(data)
    //   })
    //   .finally(function(){
    //     console.log('finished')
    //   });

    // --------------------------
    // 两种写法是等效的
    foo()
      .then(function(data){
        console.log(data)
      },function(data){
        console.log(data)
      })
      .finally(function(){
        console.log('finished')
      });

2.静态方法
.all()：Promise接收一个数组做参数，数组中的对象均为Promise事例（如果不是一个Promise，会被Promise.resolve转为Promise），会把全部的返回值传出
.race()：Promise.race同样接收一个数组做参数，当其中一个市里的状态发生改变，会把第一个改变的返回值传给回调函数传出

function queryData(url) {
            return new Promise(function(resolve, reject) {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState != 4) return;
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 处理正常的情况
                        resolve(xhr.responseText);
                    } else {
                        // 处理异常情况
                        reject('服务器错误');
                    }
                };
                xhr.open('get', url);
                xhr.send(null);
            });
        }

        var p1 = queryData('http://localhost:3000/a1');
        var p2 = queryData('http://localhost:3000/a2');
        var p3 = queryData('http://localhost:3000/a3');
        // Promise.all([p1,p2,p3]).then(function(result){
        //   console.log(result)
        // })
        Promise.race([p1, p2, p3]).then(function(result) {
            console.log(result)
        })