zoukankan      html  css  js  c++  java
  • Promise

    Promise

    1、主要用于异步计算
    2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
    3、可以在对象之间传递和操作promise,帮助我们处理队列

    Promise 基本用法

    • 实例化Promise对象,构造函数中传递函数,该函数中用于处理异步任务

    • resolve和reject 两个参数用于处理成功和失败两种情况,并通过p.then获取处理结果

      var p = new Promise(function(resolve,reject){
          //这里用于实现异步任务
          setTimeout(function(){
              var flag =true;
              if(flag){
                  //正常情况
                  resolve("hello");
              }else{
                  //异常情况
                  reject('出错了');
              }
          },100);
          //成功调用resolve()
          //失败时调用reject()
      });
      p.then(function(data){
          //从resolve得到正常结果
      },function(info){
          //从reject得到错 误信息
      }
      

      基于Promise发送Ajax

      function queryData(url){
          var p = new Promise(function(resolve,reject){
              var xhr = new XMLHttpRequest();
              xhr.onreadystatechange = function(){
                  if(xhr.readySate !=4) return;
                  if(xhr.readyState == 4 && xhr.status == 200){
                      //处理正常的情况
                      resolve(xhr.responseText);
                  }else{
                      //处理异常情况
                      reject('服务器异常');
                  }
              };
              xhr.open('get',url);
              xhr.send(null);
          });
          return p;
      }
      queryData('http://localhost:8080/data')
          .then(function(data){
          	//从resolve得到正常结果
          	console.log(data);
      	},function(info){
          	//从reject得到错 误信息
          	console.log(info);
      	}
      //-----------------------
      //发送多个ajax请求并且保证顺序
      queryData('http://localhost:8080/data')
      .then(function(data){
          console.log(data);
        return queryData('http://localhost:8080/data1');
      },function(info){console.log(info)})
      .then(function(data){
          console.log(data);
          return queryData('http://localhost:8080/data2');
      },function(info){console.log(info)})
      .then(function(data){
          console.log(data);
      },function(info) {console.log(info)})
      

    then 参数中的函数返回值

    1. 返回Promise实例对象
      • 返回该实例对象会调用下辖一个then
    2. 返回普通值
      • 返回的普通值会直接传递给下一个then,通过参数中函数的参数接收该值
    queryData('http://localhost:8080/data')
    .then(function(data){
        console.log(data);
        return queryData('http://localhost:8080/data1');
    },function(info){console.log(info)})
    .then(function(data){
        console.log(data);
        return data;
    },function(info){console.log(info)})
    .then(function(data){
        console.log(data);
    },function(info) {console.log(info)})
    

    Promise常用的API

    实例方法

    • p.then()得到异步任务的正确结果
    • p.catch()获取异常信息
    • p.finally()成功与否都会执行
    function fun(){
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve(123);
            },100);
        })
    }
    fun()
    .then(function(data){
        console.log(data);
    })
    .catch(function(data){
        console.log(data)
    })
    .finally(function(){
        console.log('finished')
    });
    
  • 相关阅读:
    Visual C#使用DirectX实现视频播放
    sql server中新增一条数据后返回该数据的ID
    JQuery上传插件Uploadify使用详解
    .NET JS escape加密的后台解密
    Redis Sentinel(哨兵模式)
    Redis集群入门
    Redis 4.0.X版本reshard出现错误的解决办法
    首层nginx 传递 二级代理,三级代理......多级代理nginx 客户端真实IP的方法
    Centos6 Ruby 1.8.7升级至Ruby 2.3.1的方法
    SQL Server 2008示例数据库安装问题解决
  • 原文地址:https://www.cnblogs.com/junlinsky/p/14055808.html
Copyright © 2011-2022 走看看