• promise基础


    概述

    Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息

    使用Promise主要有以下好处:

    • 可以避免多层异步调用嵌套问题(回调地狱)
    • Promise对象提供了简洁的API,使得控制异步操作更加容易

    promise的基本用法

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

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

    new Promise(
      function (resolve, reject) {
        // 一段耗时的异步操作
        resolve('成功') // 数据处理完成
        // reject('失败') // 数据处理出错
      }
    ).then(
      (res) => {console.log(res)},  // 成功
      (err) => {console.log(err)} // 失败
    )
    
    • promise 就是一个语法

    • 我们的每一个异步事件,在执行的时候都会有三个状态,执行中 / 成功 / 失败

    • resolve作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;

    • reject作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

    • promise有三个状态:

    1. pending[待定]初始状态

    2. fulfilled[实现]操作成功

    3. rejected[被否决]操作失败

      当promise状态发生改变,就会触发then()里的响应函数处理后续步骤;

      promise状态一经改变,不会再变。

    • Promise对象的状态改变,只有两种可能:

      从pending变为fulfilled

      从pending变为rejected。

      这两种情况只要发生,状态就凝固了,不会再变了。

    基于promise处理ajax请求

    function  queryData(){
        return new Promise(function(resolve,reject){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(xhr.readyState !=4) return;
                if(xhr.status==200){
                    resolve(xhr.responseText)
                }else{
                    reject('出错了')
                }
            }
            xhr.open('get','/data');
            xhr.send(null);
        })
    }
    

    多次发送ajax请求

    queryData()
        .then(function(data){
            return queryData();
        })
         .then(function(data){
            return queryData();
        })
         .then(function(data){
            return queryData();
        });
    

    then参数中函数返回值

    1. 返回Promise实例对象

      返回的该实例对象会调用下一个then

    2. 返回普通值

      返回的普通值会传递给下一个then,通过then参数中函数的参数接收该值

    promise常用的API

    1. 实例方法

      p.then() 得到异步任务的正确结果

      p.catch() 获取异常信息

      p.finally() 成功与否都会执行(尚且不是正式标准)

       queryData()
           .then(function(data){
           console.log(data);
       	 })
           .catch(function(data){
           console.log(data);
       	 })
           .finally(function(data){
           console.log('finished');
       	 });
      
    2. 对象方法

    Promise.all()并发处理多个异步任务,所有任务都执行完成才能得到结果

    Promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果

    Promise.all([p1,p2,p3]).then((result)=>{
        console.log(result)
    })
     Promise.race([p1,p2,p3]).then((result)=>{
        console.log(result)
    })
    
  • 相关阅读:
    flexigrid 分析
    [转]使IE浏览器支持CSS3属性(圆角、阴影、渐变)
    mojoPortal 笔记
    简易的Json转换的实现
    关于 base64 编码不适用web的改进
    无法删除表,提示被外键约束引用的解决
    HTML 自适应高度的Js 算法
    从网页中提取出所有的电子邮件
    sqlserver 聚合函数
    调试MVC4的方法
  • 原文地址:https://www.cnblogs.com/wahaha-/p/14044911.html
Copyright © 2020-2023  润新知