es6之promise简单理解及使用

技术文章 8个月前 完美者
1,263 0

标签:cal   理解   函数   ini   结果   settime   out   error   text   

promise

1. promise是解决异步的一种方案,也就是让promise帮我们去处理异步,最终promise会返回异步处理的结果。
2. 有了promise之后,让异步处理更加灵活,还能够解决之前的回调地狱的问题。

  • promise的使用

  • 我们需要用promise帮我们处理异步

    var a=new Promise(function(resolve.reject){
        // 在这里来进行真正的异步处理
         setTimeout(function(){
            console.log(‘hello promise‘)
          }, 100);
    }
  • promise在处理异步的时候,会成功或者失败,成功调用resolve,失败调用reject

    var p = new Promise(function(resolve, reject){
          // 第一个形参是成功的回调 异步成功 resolve
          // 第一个形参是失败的回调 异步失败 reject
          // 这里用于实现异步任务
          setTimeout(function(){
            var flag = true;
            if(flag) {
              // 正常情况
              resolve(‘hello promise‘);
            }else{
              // 异常情况
              reject(‘error ‘);
            }
          }, 200);
        });
  • 获取到异步的结果

    p.then(function(data){
        //第一个函数是成功时调用
        console.log(data)
    },function(info){
        //这个函数是失败时调用
        console.log(info)
    });
  • promise解决回调地狱的问题
    在promise实例的then方法内部 如果return了一个新的Promise实例对象
    下一个.then的成功回调函数,是属于新的promise处理异步的成功的回调

    function queryData(url){
        var p=new Promise((resolve.reject)=>{
                var xhr=new XMLHttpRequest();
                xhr.open(‘get‘,url);
                xhr.send(null);
                xhr.onlaod=function(){
                    if(xhr.status==200){
                        resolve(xhr.respomseText)
                    }else{
                        reject(‘服务器出错‘)
                    }   
                }
        })
    }
    queryData(‘http://localhost:3000/data‘).then(function(res){
          console.log(res)
          // queryData 返回的是 Promise实例对象
          return queryData(‘http://localhost:3000/data1‘)
        }).then(function(res) {
          console.log(res)
          return queryData(‘http://localhost:3000/data2‘)
        }).then(function(res) {
          console.log(res)
        })
  • promise的实例方法
    通过实例对象来调用的方法或属性,我们叫做:实例方法或者实例属性
    1. then: 第一个回调函数是成功的回调,第二个是失败的回调
    2. catch:专门用来处理失败的
    3. 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‘)
          });

    通过构造函数来调用的方发或属性,我们叫做:静态方法或者静态属性
    1. all:该方法接收一个数组,数组的每一项都是处理异步的promise实例对象,数组每一项的异步都处理完成之后,all的then的成功的回调才会执行
    2. race:使用的方式和all一摸一样,区别就是race的then的成功回调,只要有一个异步成功,then就调用

    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‘);
        // 静态方法 实例方法
        // 通过构造函数调用的方法 叫做静态方法
        // 通过实例调用的叫做实例方法
    
        //1. Promise.all() 并发处理多个异步执行任务 ,所有任务都执行完才能得到结果
        // 这里会延迟3秒才会出结果
        Promise.all([p1, p2, p3]).then(function (result) {
          console.log(result)
        })
        //2. Promise.race 并发处理多个异步任务 只要有一个任务完成就能得到结果
        // 得到最先返回的结果
        Promise.race([p1, p2, p3]).then(function (result) {
          console.log(result)
        })

es6之promise简单理解及使用

标签:cal   理解   函数   ini   结果   settime   out   error   text   

原文地址:https://blog.51cto.com/13524641/2519224

版权声明:完美者 发表于 2020-08-13 12:01:29。
转载请注明:es6之promise简单理解及使用 | 完美导航

暂无评论

暂无评论...