• Promise用法


    1.概述

    Promise是一步编程的一种解决方案,从语法上讲,promise是一个对象,从它可以获取异步的问题

    Promise的优点:

    可以避免多次异步调用嵌套导致的回调地域

    提供了简洁的api,使得控制异步变得简单更加容易

    详细promise使用规则https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

    2.使用

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

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

    代码实列:

     1   var p = new Promise(function (resolve, reject) {
     2             //用于实现异步任务
     3             setTimeout(function () {
     4                 var flag = true
     5                 if (flag) {
     6                     resolve('成功')
     7                 } else {
     8                     reject('失败')
     9                 }
    10             })
    11         },1000)
    12         p.then(function (success) {
    13             //这里面是成功了要执行的操作
    14             console.log(success);
    15         },
    16             function (error) {
    17                 //这里面是失败了要进行的操作
    18                 console.log(error);
    19             })

    3.使用Promise发送Ajax请求

    先封装一个函数,可以重复调用。

     1
     //     })
            function P(url) {
                var p = new Promise(function (resolve, reject) {
                    var xhr = new XMLHttpRequest()
                    xhr.open('get', url, true)
                    xhr.onreadystatechange = function (res, req) {
                        if (req.status === 200) {
                            resolve(req.responseText)
                        } else {
                            reject('错误')
                        }
                    }
                    xhr.send()
                })
            }
            var URL = "api地址";
            P(URL).then(function onFulfilled(value) {
                console.log(value);
            }).catch(function onRejected(error) {
                console.log(error);
            });

     4.Promise的实列方法

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

    p.catch()获取异常信心

    p.finally()无论正确还是错误都会执行(不是正式版本)

    1   P().then(function (data) {
    2             console.log(data);
    3         })
    4         P().catch(function (data) {
    5             console.log(data);
    6         })
    7         p().finally(function (data) {
    8             console.log(data);
    9         })

    5.Promise的对象方法

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

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

    all用法

    1  var a=p(url1)
    2         var b=P(url2)
    3         var c=P(url3)
    4         Promise.all([a,b,c]).then(function(data){
    5             console.log(data);
    6         })

    控制台得到的data是三个实列都执行完成后才会输出log

    race用法

    1   var a = p(url1)
    2         var b = P(url2)
    3         var c = P(url3)
    4         Promise.race([a, b, c]).then(function (data) {
    5             console.log(data);
    6         })

    其中只要有一个实列执行完成后就会输出log,用法跟all相同,只不过执行条件不同

  • 相关阅读:
    门面模式简述
    转:日志组件logback的介绍及配置使用方法
    spring boot项目中使用sfl4j+logbak配置
    druid相关资料
    spring boot +druid数据库连接池配置
    设计模式之Strategy模式
    转:高效代码审查的八条准则和十个经验
    SpringMVC如何解决POST请求中文乱码问题,GET的又如何处理呢?
    【其它】关于本博客的一些说明
    [THUWC2020] 自爆记
  • 原文地址:https://www.cnblogs.com/xiaopo/p/14333955.html
Copyright © 2020-2023  润新知